JavaScript setTimeout无法访问函数变量

JavaScript setTimeout can't access function variable

本问题已经有最佳答案,请猛点这里访问。

至少我认为在这种情况下会发生这种情况:

1
2
3
4
5
6
7
8
9
10
function MyFunc() {
    var people = Array({name: 'Alex', age: 25}, {name: 'Ellen', age: 43});
    for (var i=0; i<people.length; i++) {
        setTimeout(function() { ShowIt(people[i].name) }, 1000); // !!!
    }
}

function ShowIt(name) {
    alert(name);
}

我收到此错误Uncaught TypeError: Cannot read property 'name' of undefined,因此它看起来像setTimeout侦听器函数内的people变量无法访问。 为什么以及如何解决它?


实际上人阵是好的。 它发生的是你的i实际上是2并且数组中没有第三个元素。 这就是你得到这个错误的原因。 这是解决方案:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
function MyFunc() {
    var people = Array({name: 'Alex', age: 25}, {name: 'Ellen', age: 43});
    for (var i=0; i<people.length; i++) {
        (function(i) {
            setTimeout(function() {            
                ShowIt(people[i].name)
            }, 1000);
        })(i);
    }
}

function ShowIt(name) {
    console.log(name);
}

MyFunc();

这是一个jsfiddle http://jsfiddle.net/krasimir/XDfLu/2/

答案很长:当你使用setTimeout时,你将一个函数传递给它。 将来会调用该函数,并且您将在此处执行的操作也将在未来执行。 在那一刻(未来一个)你的i不再是0或1.它实际上是2因为你的循环结束了。 提供的解决方案使用额外的闭包来创建另一个范围/上下文。 一旦调用传递给setTimeout的函数,它就会查找一个i变量。 它的范围没有这样的东西,所以它升级了一层。 而且我们需要的是实际价值。