Блог

Главная - Вопросы по программированию - Javascript и Vue.js бесконечный цикл while в альтернативной асинхронной функции

Javascript и Vue.js бесконечный цикл while в альтернативной асинхронной функции

#javascript #loops #vue.js #interpolation

#javascript #циклы #vue.js #интерполяция

Вопрос:

В настоящее время я использую асинхронную функцию для интерполяции определенного набора элементов из DOM, в настоящее время она отлично работает, но я не могу пройти проверку lint, например, поэтому мне было интересно, знает ли кто-нибудь о лучших решениях. Вот мой текущий код:

  async mounted() {
    let colorMap = interpolate(['#fffbfb', '#ff4141']);

    let i

    // eslint-disable-next-line no-constant-condition
    while (true) {
      let switchColor = false
      for (i = 0; i < 100; i  ) {
        let group = this.blinkingGroup
        if (!switchColor) {
          colorMap = interpolate(['#ff4141', '#fffbfb']);
        } else {
          colorMap = interpolate(['#fffbfb', '#ff4141']);
        }
        group.forEach(value => {
          try {
            value.dom.style.stroke = colorMap(i * 0.01)
          } catch (e) {
            //console.log(e)
          }
        })
        await new Promise(r => setTimeout(r, 10));
        switchColor = true

      }
    }
  }

Ответ №1:

Обновление: как упоминалось в комментариях, requestAnimationFrame здесь лучше подходит:

Почему лучше?

  • Браузер может оптимизировать его, поэтому анимация будет более плавной
  • Анимации на неактивных вкладках остановятся, что позволит процессору охладиться
  • Более экономичный расход батареи

вы можете прочитать больше о requestAnimationFrame здесь и здесь

старый
вы можете использовать setInterval вместо while(true)

setInterval(функция, миллисекунды)

Комментарии:

1. requestAnimationFrame был бы еще более уместным, так как это мигающая анимация. setInterval может вызвать проблемы при загрузке нескольких из этих компонентов. Стоит отметить, что эти циклы должны быть уничтожены в beforeDestroy() перехвате жизненного цикла компонента, в противном случае происходит утечка памяти.

Метки: