Javascript:其他异步函数中的异步嵌套函数给出了意外的结果

Question

我有两个异步函数，一个嵌套在另一个中，如下所示:

  //Async 1
  document.addEventListener("click", function(event){
     for (var i in event){
        //Async 2
        setTimeout(function(){
           console.log(i);
        }, 200*i);
     }
  });

我想要的是能够打印 event 对象的每个条目(i)。然而 Firefox 上的输出是这样的:

MOZ_SOURCE_KEYBOARD
MOZ_SOURCE_KEYBOARD
MOZ_SOURCE_KEYBOARD
MOZ_SOURCE_KEYBOARD
..

如果我将 console.log(i) 移到 Async 2 之外，那么我会得到正确的结果:

type
target
currentTarget
eventPhase
bubbles
cancelable
..

为什么在读取async 2中的i时无法正常工作？ event 不应该在整个 Async 2 代码块中“事件”吗？

Answer 1

setTimeout 使用 async1 中出现的 i。也就是说，在创建超时函数时，它引用 i 而不是使用 i 的值。当超时函数最终运行时，它会查看 i 的当前值，这是 for 循环之后 event 中的最后一个键。

您可以通过使用自调用函数来避免这种情况，这样该函数的参数对于超时函数来说是本地的:

for (var i in event) {
    setTimeout((function(i) {
        return function() { console.log(i); }
    })(i), 200 * i);
}