For循环Javascript中只能从最后一次迭代输出值(For Loop in Javascrip

我有这样的Javascript代码，它按预期工作：

<div class="test"></div>

<script>
setTimeout(function(){$(".test").append("test1")},1000);
setTimeout(function(){$(".test").append("test2")},2000);
</script>
<script src="js/jquery.min.js"></script>

它显示“测试1”，然后再“test2的”一秒钟后，因为这样的：“test1test2”，这是我想要的。

当我尝试这样做在for循环，就像这样：

var timeInterval = 1000;
for (var i = 0, l = 2; i < l; i++ ) {
    setTimeout(function(){$(".test").append("test" + i)},timeInterval);
    timeInterval += 1000;
}

然后我得到“测试2”，然后再“test2的”一秒钟后，因为这样的：“test2test2”，这不是我想要的。

事实上，如果L = 3，然后我得到“test3test3test3”而不是“test1test2test3”。 有谁知道如何解决这个问题呢？

Answer 1:

了var i当递增到2 setTimeout正在执行的功能，所以它只是打印的i的值作为2导致test2test2 。

您应该使用封闭使用的情况下i将打印test1test 。

DEMO： http://jsfiddle.net/mBBJn/1/

var timeInterval = 1000;
for (var i = 0, l = 2; i < l; i++) {
    (function(i) {
        setTimeout(function() {
            $(".test").append("test" + (i+1))
        }, timeInterval);
        timeInterval += 1000;
    })(i);
}

编辑：使用函数参数。

Answer 2:

for循环不会创建一个新的范围，你可以使用另一个函数做到这一点：

var timeInterval = 1000;
for (var i = 0, l = 2; i < l; i++) {
    setTimeout((function(i) {
        return function() {
            $(".test").append("test" + i);
        }
    })(i), timeInterval);
    timeInterval += 1000;
}

Answer 3:

变量i总是引用的当前值i （没有价值i在这种情况下调用时）。

这是范围在JavaScript中是如何工作的。

见@Esailija答案的解决方案。

Answer 4:

保持最明显的方法i在范围上解决在其他的答案，但因为你是使用jQuery，你还有其他的选择。

1. 使用$.each而不是for循环，这样，你要访问i的变量在该范围内的任何地方。

2. 使用delay ，而不是setTimeout 。 对于这个工作，你需要先触发队列： $(".test").show(0).delay(timeInterval).append("test" + i)

Answer 5:

这是因为你没有捕捉的价值i从for循环。 你可以调整你的代码，这使得它的工作：

var timeInterval = 1000;
for (var i = 0, l = 2; i < l; i++ ) {
    (function(i2, timeInterval2) {
        setTimeout(function() {
            $(".test").append("test" + i2);
        }, timeInterval2);
    })(i, timeInterval);
    timeInterval += 1000;
}

文章来源: For Loop in Javascript outputs value only from last iteration