javascript - for 循环内的 setTimeOut

Question

我对如何在 for 循环中使用 setTimeout 函数感到困惑。我想做的是基于数组一次突出显示一个 div。这是我的代码:

for (i = 0; i < strArray.length; i++) {
  doSetTimeout(i, colors, strArray);
}

然后是函数 doSetTimeout:

function doSetTimeout(i, colors, strArray) {
  $("use." + strArray[i]).css("fill", colors[Math.floor((Math.random() * colors.length) + 1)]);
  setTimeout(function() {
    $("use").css("fill", "#333333");
  }, 1000);
}

基于this thread ，我认为有一个单独的函数来进行颜色更改可以解决问题，但我仍然遇到所有 div 同时闪烁的问题。有人知道可能是什么问题吗？还有另一种更好的方法吗？

Answer 1

你可以这样做:

(function doSetTimeout(i, colors, strArray) {
  if (i >= strArray.length) return; // nothing more to do
  $("use." + strArray[i]).css("fill", colors[Math.floor((Math.random() * colors.length) + 1)]);
  setTimeout(function() {
    $("use").css("fill", "#333333");
    // call the function recursively
    doSetTimeout(i+1, colors, strArray);
  }, 1000);
})(0, colors, strArray); // Execute immediately for index 0

这将创建一个函数并立即针对数组中的第一个元素执行它。

所有其他调用仅在触发前一个超时事件时才会完成，这将确保顺序处理。

当所有元素都处理完毕后，整个事情就结束了，因为在最后一次调用 doSetTimeout 时没有安排新的超时。