大話javascript 4期：事件循環（3）

liujs 發布于2019-08-23 16:27 / 3209人閱讀

摘要：令人困惑的是，文檔中稱，指定的回調函數，總是排在前面。另外，由于指定的回調函數是在本次事件循環觸發，而指定的是在下次事件循環觸發，所以很顯然，前者總是比后者發生得早，而且執行效率也高因為不用檢查任務隊列。

一、定時器

除了放置異步任務的事件，"任務隊列"還可以放置定時事件，即指定某些代碼在多少時間之后執行。這叫做"定時器"（timer）功能，也就是定時執行的代碼。

定時器功能主要由setTimeout()和setInterval()這兩個函數來完成，它們的內部運行機制完全一樣，區別在于前者指定的代碼是一次性執行，后者則為反復執行。以下主要討論setTimeout()。

setTimeout()接受兩個參數，第一個是回調函數，第二個是推遲執行的毫秒數。

console.log(1);
setTimeout(function(){console.log(2);},1000);
console.log(3);

上面代碼的執行結果是1，3，2，因為setTimeout()將第二行推遲到1000毫秒之后執行。

如果將setTimeout()的第二個參數設為0，就表示當前代碼執行完（執行棧清空）以后，立即執行（0毫秒間隔）指定的回調函數。

setTimeout(function(){console.log(1);}, 0);
console.log(2);

上面代碼的執行結果總是2，1，因為只有在執行完第二行以后，系統才會去執行"任務隊列"中的回調函數。

總之，setTimeout(fn,0)的含義是，指定某個任務在主線程最早可得的空閑時間執行，也就是說，盡可能早得執行。它在"任務隊列"的尾部添加一個事件，因此要等到同步任務和"任務隊列"現有的事件都處理完，才會得到執行。

HTML5標準規定了setTimeout()的第二個參數的最小值（最短間隔），不得低于4毫秒，如果低于這個值，就會自動增加。在此之前，老版本的瀏覽器都將最短間隔設為10毫秒。另外，對于那些DOM的變動（尤其是涉及頁面重新渲染的部分），通常不會立即執行，而是每16毫秒執行一次。這時使用requestAnimationFrame()的效果要好于setTimeout()。

需要注意的是，setTimeout()只是將事件插入了"任務隊列"，必須等到當前代碼（執行棧）執行完，主線程才會去執行它指定的回調函數。要是當前代碼耗時很長，有可能要等很久，所以并沒有辦法保證，回調函數一定會在setTimeout()指定的時間執行。

二、Node.js的Event Loop

Node.js也是單線程的Event Loop，但是它的運行機制不同于瀏覽器環境。
這里需要注意一下，node新加了一個微任務(process.nextTick)和一個宏任務(setImmediate)
簡單的來說，就是node在處理一個執行隊列的時候不管怎樣都會先執行完當前隊列，然后再清空微任務隊列，再去執行下一個隊列。

請看下面的示意圖（作者@BusyRich）。

根據上圖，Node.js的運行機制如下。

（1）V8引擎解析JavaScript腳本。

（2）解析后的代碼，調用Node API。

（3）libuv庫負責Node API的執行。它將不同的任務分配給不同的線程，形成一個Event Loop（事件循環），以異步的方式將任務的執行結果返回給V8引擎。

（4）V8引擎再將結果返回給用戶。

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

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

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方法指定的回調函數，總是在當前"執行棧"的尾部觸發，所以不僅函數A比setTimeout指定的回調函數timeout先執行，而且函數B也比timeout先執行。這說明，如果有多個process.nextTick語句（不管它們是否嵌套），將全部在當前"執行棧"執行。

現在，再看setImmediate。

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

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

上面代碼中，setImmediate與setTimeout(fn,0)各自添加了一個回調函數A和timeout，都是在下一次Event Loop觸發。那么，哪個回調函數先執行呢？答案是不確定。運行結果可能是1--TIMEOUT FIRED--2，也可能是TIMEOUT FIRED--1--2。

令人困惑的是，Node.js文檔中稱，setImmediate指定的回調函數，總是排在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

上面代碼中，setImmediate和setTimeout被封裝在一個setImmediate里面，它的運行結果總是1--TIMEOUT FIRED--2，這時函數A一定在timeout前面觸發。至于2排在TIMEOUT FIRED的后面（即函數B在timeout后面觸發），是因為setImmediate總是將事件注冊到下一輪Event Loop，所以函數A和timeout是在同一輪Loop執行，而函數B在下一輪Loop執行。

我們由此得到了process.nextTick和setImmediate的一個重要區別：多個process.nextTick語句總是在當前"執行棧"一次執行完，多個setImmediate可能則需要多次loop才能執行完。事實上，這正是Node.js 10.0版添加setImmediate方法的原因，否則像下面這樣的遞歸調用process.nextTick，將會沒完沒了，主線程根本不會去讀取"事件隊列"！

process.nextTick(function foo() {
  process.nextTick(foo);
});

事實上，現在要是你寫出遞歸的process.nextTick，Node.js會拋出一個警告，要求你改成setImmediate。

另外，由于process.nextTick指定的回調函數是在本次"事件循環"觸發，而setImmediate指定的是在下次"事件循環"觸發，所以很顯然，前者總是比后者發生得早，而且執行效率也高（因為不用檢查"任務隊列"）。

最后注意一下，微任務中process.nextTick比promise.then快

如果你覺得這篇文章對你有所幫助，那就順便點個贊吧，點點關注不迷路~

黑芝麻哇，白芝麻發，黑芝麻白芝麻哇發哈！

前端哇發哈

云服務器 GPU云服務器大話3云端之光服務器 python事件循環 js事件循環機制 gpu javascript循環

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/103037.html

大話javascript 4期：事件循環（1）

摘要：腳本執行，事件處理等。引擎線程，也稱為內核，負責處理腳本程序，例如引擎。事件觸發線程，用來控制事件循環可以理解為，引擎線程自己都忙不過來，需要瀏覽器另開線程協助。異步請求線程，也就是發出請求后，接收響應檢測狀態變更等都是這個線程管理的。一、進程與線程現代操作系統比如Mac OS X，UNIX，Linux，Windows等，都是支持多任務的操作系統。什么叫多任務呢？簡單地說，就是操...

codergarden 2019-08-23 16:27 評論0 收藏0
大話javascript 4期：事件循環（2）

摘要：只要指定過回調函數，這些事件發生時就會進入任務隊列，等待主線程讀取。三主線程從任務隊列中讀取事件，這個過程是循環不斷的，所以整個的這種運行機制又稱為事件循環。一、任務隊列同步任務與異步任務的由來單線程就意味著，所有任務需要排隊，前一個任務結束，才會執行后一個任務。如果前一個任務耗時很長，后一個任務就不得不一直等著。如果排隊是因為計算量大，CPU忙不過來，倒也算了，但是很多時候C...

李昌杰 2019-08-23 16:27 評論0 收藏0
大話javascript 3期：閉包

摘要：由此可知閉包是函數的執行環境以及執行環境中的函數組合而構成的。此時產生了閉包。二閉包的作用閉包的特點是讀取函數內部局部變量，并將局部變量保存在內存，延長其生命周期。三閉包的問題使用閉包會將局部變量保持在內存中，所以會占用大量內存，影響性能。一、什么是閉包 1.閉包的定義閉包是一種特殊的對象。它由兩部分構成：函數，以及創建該函數的環境(包含自由變量)。環境由閉包創建時在作用域中的任何...

Freelander 2019-08-23 16:25 評論0 收藏0
大話javascript 2期：執行上下文與執行上下文棧

摘要：在中，通過棧的存取方式來管理執行上下文，我們可稱其為執行棧，或函數調用棧。因為執行中最先進入全局環境，所以處于棧底的永遠是全局環境的執行上下文。一、什么是執行上下文？執行上下文(Execution Context): 函數執行前進行的準備工作（也稱執行上下文環境） JavaScript在執行一個代碼段之前，即解析(預處理)階段，會先進行一些準備工作，例如掃描JS中var定義的變量、...

denson 2019-08-23 15:17 評論0 收藏0
大話javascript 1期：作用域和作用域鏈

摘要：全局作用域局部作用域局部作用域全局作用域局部作用域塊語句沒有塊級作用域塊級聲明包括和，以及和循環，和函數不同，它們不會創建新的作用域。局部作用域只在該函數調用執行期間存在。一、什么是作用域？作用域是你的代碼在運行時，各個變量、函數和對象的可訪問性。（可產生作用的區域）二、JavaScript中的作用域在 JavaScript 中有兩種作用域全局作用域局部作用域當變量定...

NicolasHe 2019-08-23 15:16 評論0 收藏0