Javascript 和 Vue.js 異步中的無限 while 循環 function 替代方案

Question

我目前使用異步 function 從 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 的更多信息

---

老的
您可以使用 setInterval 而不是 while(true)

setInterval（函數，毫秒）