for循环中的setTimeout不打印连续值[重复]

Question

我有这个脚本：

for (var i = 1; i <= 2; i++) {
    setTimeout(function() { alert(i) }, 100);
}

但是3 两次都收到警报，而不是1 然后2。

有没有办法传递i，而不将函数写成字符串？

Answer 1

您可以使用extra arguments to setTimeout 将参数传递给回调函数。

for (var i = 1; i <= 2; i++) {
        setTimeout(function(j) { alert(j) }, 100, i);
}

注意：这不适用于 IE9 及以下浏览器。

Answer 2

您必须为每个超时函数安排一个不同的“i”副本。

function doSetTimeout(i) {
  setTimeout(function() { alert(i); }, 100);
}

for (var i = 1; i <= 2; ++i)
  doSetTimeout(i);

如果您不这样做（并且同样的想法还有其他变体），那么每个计时器处理函数将共享相同的变量“i”。循环结束后，“i”的值是多少？是3！通过使用中间函数，可以生成变量值的副本。由于超时处理程序是在该副本的上下文中创建的，因此它有自己的私有“i”可供使用。

edit — 随着时间的推移，有几个 cmets 显然有些混淆，因为设置几个超时会导致所有处理程序同时触发。了解设置计时器的过程（对setTimeout() 的调用）几乎不需要任何时间，这一点很重要。也就是说，告诉系统“请在 1000 毫秒后调用此函数”几乎会立即返回，因为在定时器队列中安装超时请求的过程非常快。

因此，如果发出 连续 超时请求，就像 OP 中的代码和我的回答中的情况一样，并且每个请求的时间延迟值相同，那么一次这段时间过去了，所有的计时器处理程序将被快速连续地一个接一个地调用。

如果您需要每隔一段时间调用处理程序，您可以使用setInterval()，它的调用方式与setTimeout() 完全相同，但在请求数量的重复延迟后会触发多次，或者改为您可以建立超时并将时间值乘以迭代计数器。也就是修改我的示例代码：

function doScaledTimeout(i) {
  setTimeout(function() {
    alert(i);
  }, i * 5000);
}

（用100毫秒超时，效果不会很明显，所以我把这个数字增加到5000。）i的值乘以基本延迟值，所以调用了5次在一个循环中会导致 5 秒、10 秒、15 秒、20 秒和 25 秒的延迟。

更新

在 2018 年，有一个更简单的选择。有了在比函数更窄的范围内声明变量的新功能，如果修改了原始代码，则可以正常工作：

for (let i = 1; i <= 2; i++) {
    setTimeout(function() { alert(i) }, 100);
}

let 声明与 var 不同，它本身将导致循环的每次迭代都有一个不同的 i。

Answer 3

这是因为！

1. 超时函数 循环完成后，回调都运行良好。实际上， 随着计时器的运行，即使每次迭代都是 setTimeout(.., 0) ，所有 这些函数回调在完成后仍将严格运行 循环，这就是为什么 3 被反射！
2. 所有这两个函数，尽管它们已定义 在每个循环迭代中分别关闭 相同的共享全局 scope，实际上只有一个 i。

解决方案通过使用执行的自我功能（匿名或更好的IIFE）声明每次迭代的单个范围并拥有i的副本在里面，像这样：

for (var i = 1; i <= 2; i++) {

     (function(){

         var j = i;
         setTimeout(function() { console.log(j) }, 100);

     })();

}

更干净的应该是

for (var i = 1; i <= 2; i++) {

     (function(i){ 

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

     })(i);

}

在每次迭代中使用 IIFE(self-executed function) 为每个迭代创建了一个新范围 迭代，这给了我们的超时函数回调机会 为每次迭代关闭一个新范围，该范围有一个变量 其中包含正确的每次迭代值供我们访问。

Answer 4

一旦我解决了这个问题，我就遇到了同样的问题。

假设我想要 12 次延迟，间隔为 2 秒

    function animate(i){
         myVar=setTimeout(function(){
            alert(i);
            if(i==12){
              clearTimeout(myVar);
              return;
            }
           animate(i+1)
         },2000)
    }

    var i=1; //i is the start point 1 to 12 that is
    animate(i); //1,2,3,4..12 will be alerted with 2 sec delay

Answer 5

真正的解决方案在这里，但您需要熟悉 PHP 编程语言。 您必须混合使用 PHP 和 JAVASCRIPT 命令才能达到您的目的。

注意这一点：

<?php 
for($i=1;$i<=3;$i++){
echo "<script language='javascript' >
setTimeout(function(){alert('".$i."');},3000);  
</script>";
}
?> 

它正是你想要的，但要小心如何在 PHP 变量和 JAVASCRIPT 变量。

Answer 6

你可以使用bind方法

for (var i = 1, j = 1; i <= 3; i++, j++) {
    setTimeout(function() {
        alert(this);
    }.bind(i), j * 100);
}

Answer 7

您可以使用立即调用的函数表达式 (IIFE) 在 setTimeout 周围创建一个闭包：

for (var i = 1; i <= 3; i++) {
    (function(index) {
        setTimeout(function() { alert(index); }, i * 1000);
    })(i);
}

Answer 8

嗯，基于 Cody 的回答但更通用的另一个可行的解决方案可能是这样的：

function timedAlert(msg, timing){
    setTimeout(function(){
        alert(msg);    
    }, timing);
}

function yourFunction(time, counter){
    for (var i = 1; i <= counter; i++) {
        var msg = i, timing = i * time * 1000; //this is in seconds
        timedAlert (msg, timing);
    };
}

yourFunction(timeInSeconds, counter); // well here are the values of your choice.

Answer 9

回答？

我将它用于将商品添加到购物车的动画 - 单击时，购物车图标会从产品“添加”按钮浮动到购物车区域：

function addCartItem(opts) {
    for (var i=0; i<opts.qty; i++) {
        setTimeout(function() {
            console.log('ADDED ONE!');
        }, 1000*i);
    }
};

注意持续时间以 单位时间 n 个 epocs 为单位。

所以从点击那一刻开始，动画开始 epoc（每个动画的）是每个一秒单位乘以项目数的乘积。

epoc：https://en.wikipedia.org/wiki/Epoch_(reference_date)

希望这会有所帮助！

Answer 10

setTimeout 的函数参数正在关闭循环变量。循环在第一次超时之前结束并显示i 的当前值，即3。

由于 JavaScript 变量只有函数作用域，解决方法是将循环变量传递给设置超时的函数。你可以像这样声明和调用这样的函数：

for (var i = 1; i <= 2; i++) {
    (function (x) {
        setTimeout(function () { alert(x); }, 100);
    })(i);
}