Question

我目前使用异步函数从 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

      }
    }
  }

Answer 1

更新：正如评论中提到的，requestAnimationFrame 更适合这里：

为什么更好？

浏览器可以优化它，所以动画会更流畅
非活动选项卡中的动画将停止，从而使 CPU 冷却
更省电

您可以阅读更多关于 RequestAnimationFrame here 和 here

旧
你可以使用 setInterval 而不是 while(true)

<块引用>

setInterval(函数，毫秒)

Javascript 和 Vue.js 在异步函数替代中无限循环

1 个答案: