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

      }
    }
  }

async-mounted（）{
让colorMap=插值（['#fffbfb'，'#ff4141']）；
让我
//eslint禁用下一行无恒定条件
while（true）{
设switchColor=false
对于（i=0；i<100；i++）{
让组=this.blinkingGroup
如果（！switchColor）{
colorMap=插值（['#ff4141'，'#fffbfb']）；
}否则{
colorMap=插值（['#fffbfb'，'#ff4141']；
}
group.forEach（值=>{
试一试{
value.dom.style.stroke=colorMap（i*0.01）
}捕获（e）{
//控制台日志（e）
}
})
等待新的承诺（r=>setTimeout（r，10））；
switchColor=true
}
}
}

更新：如评论中所述，requestAnimationFrame更适合这里：

为什么更好

• 浏览器可以对其进行优化，因此动画将更加平滑
• 非活动选项卡中的动画将停止，使CPU冷却
• 电池更友好

您可以阅读有关RequestAnimationFrame和

---

旧的
您可以使用setInterval代替while（true）

setInterval（函数，毫秒）

---

requestAnimationFrame更合适，因为这是一个闪烁的动画。当加载了多个组件时，setInterval可能会导致问题。值得注意的是，必须在

beforeDestroy（）

组件生命周期挂钩中销毁这些循环，否则会发生内存泄漏。