for循环中的setTimeout一次全部触发[重复]答案

【问题标题】：setTimeout in for loop fires all at once [duplicate]for循环中的setTimeout一次全部触发[重复]
【发布时间】：2015-10-05 12:49:20
【问题描述】：

我正在尝试在 for 循环中运行 setTimeout。我已按照建议将 setTimeout 移到单独的函数中。然而，一切似乎都在循环结束时立即触发。

在本例中，我希望 console.logs 每秒触发一次。

function setDelay(i) {
    setTimeout(function(){
        console.log(i);
    }, 1000);
}

for (var i = 1; i <= 10; ++i) {
    setDelay(i);
}

【问题讨论】：

我对输出真的很好奇，我猜i 变量保留了值，因为它在不同的函数中？如果是循环变量，它肯定会输出10 十次。
我只是好奇：你为什么问一个问题，甚至懒得回答别人的问题和答案？

标签： javascript for-loop settimeout

【解决方案1】：

实现这一点的最简单方法是将超时乘以索引：

function setDelay(i) {
    setTimeout(function(){
        console.log(i);
    }, i * 1000);
}

【讨论】：

【解决方案2】：

您的代码的问题在于它会创建 10 个超时，这些超时或多或少会在 1 秒后同时触发。

如果你想每秒执行一次（或任何其他频率），你可以使用 setInterval 来代替。

【讨论】：

【解决方案3】：

你的循环没有延迟，所以你真正想要的是第一次设置间隔为 1000 毫秒，第二次设置为 2000 毫秒等。

function setDelay(i) {
    setTimeout(function(){
        console.log(i);
    }, 1000 * i);
}

for (var i = 1; i <= 10; ++i) {
    setDelay(i);
}

这可以通过将时间乘以索引变量轻松实现。

【讨论】：

【解决方案4】：

您最好使用 setInterval() 而不是 setTimeout()。使用 clearInterval() 您可以阻止它运行。您编写的代码不起作用，因为 for 循环本身没有范围。您可以使用 setInterval() 绕过 for 循环。

【讨论】：

【解决方案5】：

您也可以这样做：

(function updateEverySecond(){
    console.log(1);
    setTimeout(updateEverySecond, 1000);
})();

【讨论】：

【解决方案6】：

使用setInterval 并引用计数器可能是您更好的解决方案。

(function(){
  var count        = 0,
      upperBound   = 3,
      intervalTime = 1000,
      interval     = setInterval(function(){
        if (count === upperBound) {
         clearInterval(interval);
        } else {
          console.log(count);
          count++;
        }
      }, intervalTime);
}());

希望能帮到你！

【讨论】：