JavaScript setTimeout可以't访问函数变量

JavaScript setTimeout can't access function variable

本文关键字：访问 函数 变量 setTimeout 可以 JavaScript      更新时间：2023-09-26

至少是我认为在这种情况下会发生的情况：

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变量是不可访问的。为什么以及如何修复？

实际上people数组是可以的。实际情况是，您的i实际上是2，并且数组中没有第三个元素。这就是为什么你会出现这个错误。以下是解决方案：

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();

这是一把小提琴http://jsfiddle.net/krasimir/XDfLu/2/

长话短说：当你使用setTimeout时，你正在向它传递一个函数。这个函数将来会被调用，你在那里做的事情将来也会被执行。在那一刻（未来的一刻），你的i不再是0或1。实际上是2，因为循环结束了。所提供的解决方案使用额外的闭包来创建另一个作用域/上下文。一旦传递给setTimeout的函数被调用，它就会查找i变量。在它的范围内没有这样的东西，所以它上升了一个层次。还有我们需要的实际价值。

相关文章：