javascript - Javascript中的setInterval运行速度很快

我已经看到了这类信息，但是我无法弄清为什么我的特定设置如此快速地通过该功能闪烁。

这是我想做的事情：

我在页面上有正方形，需要按顺序发光，但相隔500毫秒。我将jQuery标识符存储在数组中并循环遍历。

function glow(source) {// glows
  $(source).addClass("square-active")
  setTimeout(function() {
    $(source).removeClass("square-active");
  }, 500);
}

function iterator() {
  var y = 0;
    setTimeout(function() {
     for (var t=0; t<newComp.slice(0, numTurn).length; t++) {
          glow(squareArr[newComp[t]].div)
       y = y + 1
}
    }, 500 * y)
      }

我知道正方形已被正确迭代，因为我已将其登录到控制台以进行验证。我可以看到方块按顺序闪烁，但是速度很快。

当我尝试在setInterval中包装glow（）函数时，我也不相信它也可以工作。

我究竟做错了什么？

最佳答案

基本上，您要计划（使用setTimeout）一组函数，这些函数捕获每个正方形的索引，相隔500毫秒以突出显示正方形。

function iterator() {
    for (let t=0; t<newComp.slice(0, numTurn).length; t++) {
        setTimeout(function() {
             glow(squareArr[newComp[t]].div)
        }, 500 * t)
    }
}

使用let关键字在调用t的嵌套函数的词法作用域记录中捕获glow的值。如果要恢复y变量，请继续-它似乎与t具有相同的值。

let的用法很重要。有关在不使用let的情况下捕获闭包内循环变量值的方法，请参见常见问题JavaScript closure inside loops – simple practical example。