1背景

從敲下第一行“Hello World!”起，我們都無時無刻的使用并接觸著事件循環(huán)。

去年寫react的時候總會遇到設(shè)置setState，后面調(diào)用值不會改變的問題。會想到是異步的原因，試著延時定時問題得到解決。

    this.setState({status: 1})
    console.log(this.state.status);   //0
    setTimeout(()=>{
        console.log(this.state.status);    //1
    },100)

問題可以解決，所以延時定時解決了之后的很多問題。

后面看到j(luò)avascript的事件循環(huán)，才真正理解了這之中的原理。

2單線程

從學習JavaScript開始，就一直看書和資料說JavaScript是一門單線程的語言。JavaScript到處存在著異步（剛開始認為異步是主線程下開的子線程）是依靠事件循環(huán)來實現(xiàn)的。

3同步異步

單線程就意味著，所有任務(wù)需要排隊，前一個任務(wù)結(jié)束，才會執(zhí)行后一個任務(wù)。如果前一個任務(wù)耗時很長，后一個任務(wù)就不得不一直等著。

如果計算量大，讀寫IO請求、Ajax開銷大。如果通過同步來獲取數(shù)據(jù)會造成程序阻塞。所以像這種開銷大的任務(wù)，我們使用異步處理。

所有任務(wù)可以分成兩種，一種是同步任務(wù)（synchronous），另一種是異步任務(wù)（asynchronous）。同步任務(wù)指的是，在主線程上排隊執(zhí)行的任務(wù)，只有前一個任務(wù)執(zhí)行完畢，才能執(zhí)行后一個任務(wù)；異步任務(wù)指的是，不進入主線程、而進入"任務(wù)隊列"（task queue）的任務(wù)，只有"任務(wù)隊列"通知主線程，某個異步任務(wù)可以執(zhí)行了，該任務(wù)才會進入主線程執(zhí)行。

4事件循環(huán)

bg2014100802.png

根據(jù)事件循環(huán)圖來理解這一段代碼

//首先整段代碼進入主線程執(zhí)行
let a= 5;
//同步代碼立即執(zhí)行，輸出a=5
console.log(a);
//按鈕綁定點擊事件，當用戶點擊按鈕事件回調(diào)函數(shù)進入任務(wù)隊列，待主線程執(zhí)行完畢調(diào)用該函數(shù)
oBtn.onclick(function () {
    a = 10;
    console.log(a, 'click');
})
//當延時定時時間到的時候，回調(diào)函數(shù)進入任務(wù)隊列，待主線程執(zhí)行完畢調(diào)用任務(wù)隊列中的函數(shù)。
setTimeout(function () {
    console.log(a,'timeout');
},5000)

5node中的事件循環(huán)

Node.js也是單線程的Event Loop，但是它的運行機制不同于瀏覽器環(huán)境。

bg2014100803.png

• V8引擎解析JavaScript腳本。
• 解析后的代碼，調(diào)用Node API。
• libuv庫負責Node API的執(zhí)行。它將不同的任務(wù)分配給不同的線程，形成一個Event Loop（事件循環(huán)），以異步的方式將任務(wù)的執(zhí)行結(jié)果返回給V8引擎。
• V8引擎再將結(jié)果返回給用戶。

除了setTimeout和setInterval這兩個方法，Node.js還提供了另外兩個與"任務(wù)隊列"有關(guān)的方法：process.nextTick和setImmediate。它們可以幫助我們加深對"任務(wù)隊列"的理解。

process.nextTick方法可以在當前"執(zhí)行棧"的尾部----下一次Event Loop（主線程讀取"任務(wù)隊列"）之前----觸發(fā)回調(diào)函數(shù)。也就是說，它指定的任務(wù)總是發(fā)生在所有異步任務(wù)之前。setImmediate方法則是在當前"任務(wù)隊列"的尾部添加事件，也就是說，它指定的任務(wù)總是在下一次Event Loop時執(zhí)行，這與setTimeout(fn, 0)很像。

process.nextTick(function A() {
  console.log(1);
  process.nextTick(function B(){console.log(2);});
});

setTimeout(function timeout() {
  console.log('TIMEOUT FIRED');
}, 0)
// 1
// 2
// TIMEOUT FIRED

上面代碼中，由于process.nextTick方法指定的回調(diào)函數(shù)，總是在當前"執(zhí)行棧"的尾部觸發(fā)，所以不僅函數(shù)A比setTimeout指定的回調(diào)函數(shù)timeout先執(zhí)行，而且函數(shù)B也比timeout先執(zhí)行。這說明，如果有多個process.nextTick語句（不管它們是否嵌套），將全部在當前"執(zhí)行棧"執(zhí)行。

現(xiàn)在，再看setImmediate。

setImmediate(function A() {
  console.log(1);
  setImmediate(function B(){console.log(2);});
});

setTimeout(function timeout() {
  console.log('TIMEOUT FIRED');
}, 0);

哪個回調(diào)函數(shù)先執(zhí)行呢？答案是不確定。運行結(jié)果可能是1--TIMEOUT FIRED--2，也可能是TIMEOUT FIRED--1--2。setImmediate與setTimeout不分伯仲。

但在遞歸中，setImmediate永遠優(yōu)于setTimeout

setImmediate(function (){
  setImmediate(function A() {
    console.log(1);
    setImmediate(function B(){console.log(2);});
  });

  setTimeout(function timeout() {
    console.log('TIMEOUT FIRED');
  }, 0);
});
// 1
// TIMEOUT FIRED
// 2

最后感謝阮一峰老師的文章和張仁陽老師的思路。