Javascript:其他异步函数中的异步嵌套函数会产生意想不到的结果
Javascript:其他异步函数中的异步嵌套函数会产生意想不到的结果
提问于 2013-04-13 00:39:47
我有两个异步函数，一个嵌套在另一个中，如下所示：
//Async 1
document.addEventListener("click", function(event){
for (var i in event){
//Async 2
setTimeout(function(){
console.log(i);
}, 200*i);
}
});我想要的是能够打印event对象的每个条目(event)。然而，Firefox的输出如下：
MOZ_SOURCE_KEYBOARD
MOZ_SOURCE_KEYBOARD
MOZ_SOURCE_KEYBOARD
MOZ_SOURCE_KEYBOARD
..如果我将console.log(i)移出异步2，则得到正确的结果：
type
target
currentTarget
eventPhase
bubbles
cancelable
..为什么在异步2中读取i时它不能正确工作？event不应该在整个异步2代码块中“活着”吗？
回答 3
Stack Overflow用户
发布于 2013-04-13 00:43:19
用这个：
document.addEventListener("click", function(event){
var count = 1;
for (var i in event){
//Async 2
setTimeout((function(i){
return function () {
console.log(i);
};
})(i), 200 * count++);
}
});演示： http://jsfiddle.net/AQykp/
我不太清楚您使用200*i的目的是什么，因为i是一个字符串(甚至不是数字)。但我试图在我的回答中用counter修复它，假设您真正想要的是什么。
所以你看到结果的原因是因为常见的闭包问题。setTimeout回调将在for循环完成后执行，将i保留为event中的最后一个键。为了克服这一点，您必须添加一个闭包，该闭包在循环中的那个点捕获i的值。
Stack Overflow用户
发布于 2013-04-13 00:44:51
setTimeout在async1中使用I。也就是说，在创建超时函数时，它引用我而不是使用i的值。当超时函数最终运行时，它将查看i的当前值，它是event中在for-循环之后的最后一个键。
您可以通过使用自调用函数来避免这种情况，因此该函数的参数是超时函数的本地参数：
for (var i in event) {
setTimeout((function(i) {
return function() { console.log(i); }
})(i), 200 * i);
}Stack Overflow用户
发布于 2013-04-13 00:46:17
事件在回调中确实是活动的。问题是，在执行函数时，i的值已经改变(从输出中可以看到，循环已经结束，并且达到了最大值)，从而为每个回调输出相同的值。
如果您使用伊恩注释的函数，您将把实际值压缩为一个新函数。这样，i的值就会发生变化，您就可以在内部函数中捕获当前值。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/15982918
复制相关文章
相似问题
腾讯云开发者
