对于Javascript中的循环仅从最后一次迭代输出值

Question

我有这个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>

它首先显示"test1",然后在一秒后显示"test2",因此:"test1test2",这就是我想要的.

当我尝试在FOR循环中执行此操作时,如下所示:

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

然后我先得到"test2",然后在第二次得到"test2",这样:"test2test2",这不是我想要的.

事实上,如果l = 3,那么我得到"test3test3test3"而不是"test1test2test3".有人知道如何解决这个问题吗？

Answer 1

i当setTimeout执行函数时,var 会增加到2 ,因此它只会将i值打印为2 test2test2.

您应该使用闭包来使用其实例i将打印test1test.

演示: 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);
}

编辑:使用函数args.