JavaScript setTimeout 无法访问函数变量

标签 javascript settimeout

<分区>

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

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

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

长答案:当您使用 setTimeout 时,您正在向它传递一个函数。该函数在将来会被调用,您在那里所做的事情也会在将来执行。在那一刻( future 的那个)你的 i 不再是 0 或 1。它实际上是 2 因为你的循环结束了。提供的解决方案使用额外的闭包来创建一个范围/上下文。一旦传递给 setTimeout 的函数被调用,它就会查找 i 变量。它的范围内没有这样的东西,所以它上升了一个级别。还有我们需要的实际值(value)。

关于JavaScript setTimeout 无法访问函数变量,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18445360/

相关文章:

javascript - 好奇 setTimeout() 函数如何工作

javascript - 为什么while循环中的setTimeout是按顺序递增的?

node.js - 在 node.js 中,如果没有收到来自 http 请求的响应,你怎么知道?

javascript - 重新连接到同一个 Websocket

javascript - 多个 JavaScript 模式并关闭它们

javascript - 如何使用 Javascript/jQuery 进行初始大写

javascript - Redux 或 setTimeout - 如何观察子组件中的 props 变化?

javascript - 从 aspx.cs 获取 javascript 中的变量

javascript - 如何防止用户输入被克隆到javascript中的附加输入框中

javascript - 将多个数组参数传递到 setTimeout 进行幻灯片放映时出现问题