快捷導(dǎo)航

node.js中對(duì)Event Loop事件循環(huán)的理解與應(yīng)用實(shí)例分析

更新時(shí)間：2020年02月14日 10:01:11 作者：懷素真

這篇文章主要介紹了node.js中對(duì)Event Loop事件循環(huán)的理解與應(yīng)用,結(jié)合實(shí)例形式分析了node.js中Event Loop事件循環(huán)相關(guān)原理、使用方法及操作注意事項(xiàng),需要的朋友可以參考下

本文實(shí)例講述了node.js中對(duì)Event Loop事件循環(huán)的理解與應(yīng)用。分享給大家供大家參考，具體如下：

javascript是單線程的，所以任務(wù)的執(zhí)行都需要排隊(duì)，任務(wù)分為兩種，一種是同步任務(wù)，一種是異步任務(wù)。

同步任務(wù)是進(jìn)入主線程上排隊(duì)執(zhí)行的任務(wù)，上一個(gè)任務(wù)執(zhí)行完了，下一個(gè)任務(wù)才會(huì)執(zhí)行。

異步任務(wù)是不進(jìn)入主線程，而是進(jìn)入一個(gè) "任務(wù)隊(duì)列" 里，"任務(wù)隊(duì)列" 通知主線程，該異步任務(wù)才會(huì)進(jìn)入主線程執(zhí)行。

任務(wù)的運(yùn)行機(jī)制如下：

1、所有同步任務(wù)在主線程上執(zhí)行，形成一個(gè) "執(zhí)行棧"，注意棧是先進(jìn)后出的。

2、主線程外，有一個(gè) "任務(wù)隊(duì)列" ，只要異步任務(wù)處理完有結(jié)果了，就在 "任務(wù)隊(duì)列" 中放置一個(gè)事件，注意隊(duì)列是先進(jìn)先出的。

3、一旦 "執(zhí)行棧" 中所有同步任務(wù)執(zhí)行完畢。系統(tǒng)讀取 "任務(wù)隊(duì)列" 中的事件，對(duì)應(yīng)的異步任務(wù)。放入 "執(zhí)行棧" 中，開始執(zhí)行。

4、主線程不斷重復(fù)第三步，這種循環(huán)從 "任務(wù)隊(duì)列" 中讀取事件處理的這種運(yùn)行機(jī)制稱為Event Loop(事件循環(huán))。

"執(zhí)行棧" 中的同步代碼總是比 "任務(wù)隊(duì)列"中的異步任務(wù)之前運(yùn)行。

function fun() {
  setTimeout(function () {
    console.log('異步任務(wù)');
  }, 0);
  console.log(1);
  console.log(2);
  console.log(3);
  console.log(4);
  console.log(5);
}
fun();

上面的代碼，console.log代碼寫在setTimeout后面，但仍然先執(zhí)行。

"任務(wù)隊(duì)列" 是一個(gè)隊(duì)列，隊(duì)列的特性是先進(jìn)先出?？聪旅娲a：

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

輸出結(jié)果為 1 4 2 3，打印 2 的setTimeout任務(wù)比打印 3 的setTimeout任務(wù)先進(jìn)入隊(duì)列，所以會(huì)先運(yùn)行。

對(duì)于異步操作，像ajax，只有操作成功后返回結(jié)果，才會(huì)進(jìn)入 "任務(wù)隊(duì)列" 中，而不是調(diào)用的時(shí)候就放入隊(duì)列中?？聪旅娲a：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<script>
  function ajax() {
    var xhr = new XMLHttpRequest();
    xhr.open('GET', 'https://mail.163.com/', true);
    xhr.send();
    xhr.onreadystatechange = function () {
      if (xhr.readyState == 4 && xhr.status == 200) {
        console.log(xhr.responseText);
      }
    };
  }
  function fun() {
    console.log(1);
    ajax();
    setTimeout(function () {
      console.log(2);
    }, 1000);
    console.log(3);
  }
  fun();
</script>
</body>
</html>

ajax() 與 setTimeout 誰先進(jìn)入隊(duì)列，誰先輸出，是需要看兩者消耗時(shí)間，誰更短。時(shí)間短的會(huì)先進(jìn)入隊(duì)列先運(yùn)行。

setTimeout 與 setInterval 運(yùn)行機(jī)制一樣，都是在指定時(shí)間把事件插入到 "任務(wù)隊(duì)列" 尾部。區(qū)別是前者只執(zhí)行一次，后者可反復(fù)執(zhí)行。

node.js 還為我們提供了，process.nextTick 和 setImmediate 與 "任務(wù)隊(duì)列" 有關(guān)的方法。

process.nextTick 會(huì)把回調(diào)函數(shù)放在當(dāng)前 "執(zhí)行棧" 的尾部。也就是說是在讀取 "任務(wù)隊(duì)列" 之前運(yùn)行。

function fun() {
  console.log(1);
  setTimeout(function () {
    console.log(2);
  }, 0);
  process.nextTick(function () {
    console.log(3);
    process.nextTick(function () {
      console.log(4);
    });
  });
  process.nextTick(function () {
    console.log(5);
  });
  console.log(6);
}
fun();

上面的代碼會(huì)輸出 1 6 3 5 4 2 ，注意process.nextTick會(huì)把回調(diào)函數(shù)放在 "執(zhí)行棧" 的尾部。

同步代碼最先輸出 1 6，然后 3 的先放入尾部，然后 5 的跟在 3 后面。3先執(zhí)行，然后把 4 放入到 5 的后面。5執(zhí)行完后，再執(zhí)行4，最后讀取 "任務(wù)隊(duì)列" 中的輸出2。

setImmediate 會(huì)把回調(diào)函數(shù)放在當(dāng)前 "任務(wù)隊(duì)列" 的尾部。也就是下一次事件循環(huán)Event Loop時(shí)執(zhí)行。

function fun() {
  console.log(1);
  setTimeout(function () {
    console.log(2);
  }, 0);
  setImmediate(function () {
    console.log(3);
  });
  console.log(4);
}
fun();

上面的代碼是會(huì)輸出 1 4 2 3 還是 1 4 3 2 是不確定的，因?yàn)閟etTimeout 與 setImmediate 都會(huì)在下一次事件循環(huán)Event Loop中觸發(fā)，所以輸出是不確定的。

希望本文所述對(duì)大家node.js程序設(shè)計(jì)有所幫助。

您可能感興趣的文章: