js運行機制——單線程、任務隊列以及事件循環（event loop）

1、面試案例

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

// ********打印結果******
abc
5
5
5
5
5

2、相關知識點

-- 單線程：js特點，同一個時間只能做一件事

-- 任務隊列：前一個任務結束，纔會執行後一個任務

• 任務分爲：同步任務、異步任務
  同步任務：在主線程上排隊執行的任務，只有前一個任務執行完畢，才能執行後一個任務
  異步任務：不進入主線程、而進入"任務隊列"

-- 事件循環：主線程從"任務隊列"中讀取事件，這個過程是循環不斷的，所以整個的這種運行機制又稱爲Event Loop（事件循環）。

3、案例分析

for(var i = 0; i < 5; i++) { // 同步任務  先執行
    setTimeout(function () { //異步任務  後執行
        console.log(i);
    });
}
console.log(abc); //同步任務  先執行

// ********打印結果******
abc // 先執行
5  // 在所有同步代碼執行完畢之後，for循環裏的i值已變成了5
5
5
5
5

4、for循環解決辦法

-- 塊作用域 let

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

-- 自執行函數（利用閉包原理）

for(var i = 0; i < 5; i++) {
    (function(i) {  // 存儲每次循環的i值
        setTimeout(function () {
            console.log(i);
        });
    })(i)
}