立即調用函數調用 setTimeout 調用循環

Question

在以下場景中，事件setTimeout進入隊列，只有在堆棧清除后，i = 3 才會打印 3 次

//ver1
for (var i = 0; i < 3; i ++ ) setTimeout(()=> console.log(i), 3)

以下將按順序打印1 2 3因為i被捕獲在func x ??

//ver2
for (var i = 0; i < 3; i++) {
    (function x(i) {
        setTimeout(() => {console.log(i)}, 30)
    })(i);
}

為什么下面只打印2一次？

//ver3
for (var i = 0; i < 3; i++) {
    function x(i) {
        setTimeout(() => {console.log(i)}, 30)
    }(i);
}

我主要在ver2和ver3之間感到困惑

---

編輯： ver2解釋可以在這里找到。 關於為什么ver3只打印2任何見解？

Answer 1

您的第 3 版根本沒有做您認為的那樣。 括號在 IIFE 上不是可選的。 但是因為您為函數命名，它確實被解析為函數聲明：

for (var i = 0; i < 3; i++) {
    function x(i) {
        setTimeout(() => {console.log(i)}, 30)
    }
    (i);
}

你從來沒有在這里調用x(…) 。 (i)只是一個計算i變量的不必要的括號表達式。 您的代碼執行與

for (var i = 0; i < 3; i++) {
    i;
}

那么為什么這個日志2在控制台中？ 因為當您在控制台上運行它時，它會打印最后評估的語句的結果值： i ，它在循環的最后一次迭代中具有值2 。