JavaScript变量范围

Question

我遇到了一些JavaScript代码的问题.

脚本

setTimeout(function() {
    for (var i = 0; i < 5; i++) {
        setTimeout(function() {
            console.log(i);
        }, i * 200);
    }
}, 200);

输出

5,5,5,5,5代替1,2,3,4,5

我可以理解为什么这不起作用,但我想知道是否有人可以向我解释发生了什么以及为什么它不起作用!

此外,如何克服这个范围问题？

Answer 1

该setTimeout回调函数是异步执行的,所有console.log你拨打电话指向同一个i变量,当时他们正在执行中,for循环已经结束,并i包含4个.

您可以将内部setTimeout调用包含在接受参数的函数中,以便存储对所有i正在迭代的值的引用,如下所示:

setTimeout(function() {
    for (var i = 0; i < 5; i++) {
      (function (j) { // added a closure to store a reference to 'i' values
        setTimeout(function() {
            console.log(j);
        }, j * 200);
      })(i); // automatically call the function and pass the value
    }
}, 200);

有关详细信息,请查看我对以下问题的回答:

• 匿名函数中的变量 - 有人可以解释以下内容吗？