javascript - 在循环的setTimeout中使用IIFE，但是为什么呢？

Question

这个问题已经有答案了:

JavaScript closure inside loops – simple practical example (45 个回答)

已关闭 6 年前。

我知道这是一个经典的js问题:

(我的问题不是如何解决这个问题，而是IIFE如何解决这个问题。感谢其他答案链接，但我没有找到我想要的答案)

for(var i = 0; i < 5; i++) {
    setTimeout(function() {
        console.log(i);
    },1000)
}

这将打印出五个连续的 5，避免这种情况的一种方法是在 setTimeout 中创建 IIFE，我知道它会创建一个闭包，但仍然是为什么？有人可以给出更具体的解释吗？

另外为什么我不能将参数传递给函数？

for(var i = 0; i < 5; i++) {
    setTimeout(function(i) {
        console.log(i);
    },1000)
}

这会打印出 5 undefined...我更困惑了，这是为什么？

Answer 1

如果我正确理解你的问题，你想打印 0...4。您可以通过使用 let 而不是 var 来实现这一点，它为每个循环迭代创建一个新的 i 绑定(bind) [1] , [2] :

// Prints 0, 1, 2, 3, 4:
for (let i = 0; i < 5; i++) {
    setTimeout(function() {
        console.log(i);
    }, 1000);
}

您向回调添加参数 i 的建议失败，因为调用函数 setTimeout 没有向回调传递任何内容。因此，i 参数未定义。

或者，使用 classic IIFE approach :

for (var i = 0; i < 5; i++) {
    (function(i) {
        setTimeout(function() {
            console.log(i);
        }, 1000);
    })(i);
}

当然，更好的方法是将 for 循环移至 setTimeout 回调中。但我假设您选择此代码仅用于演示目的。