事件迴圈和任務佇列

2021-10-08 04:33:59 字數 1555 閱讀 1672

終於理解了事件迴圈和任務佇列,怎麼說呢,有了es5的promise後,需要我重新思考事件的執行順序以及機制。

console.log(1);

const p = new promise((resolve, reject) => ));

$.get("", function (t) )

let tiemr1 = settimeout(() => , 5);

console.log("定時器timer1與網路請求get1競爭:");

const time = date.now();

if (time % 2 == 0) else

console.log(7);

}, 10);

console.log(2)

})console.log(3)

p.then(

value => ,

reason =>

)promise.resolve().then(() => );

console.log(4);

結果:

js**是單執行緒的,執行的機制是:

(1)js是單執行緒的,自上而下逐行執行

(2)當遇到promise的建構函式的時候,它的處理函式是立即執行的,所以該處理函式內部也是直接執行的

(3)當遇到定時器或ajax網路請求的時候,等到達條件時,將他們的回到函式,新增到任務佇列中。比如:定時器是由瀏覽器幫忙計時的,當到達計時的條件後,將定時器內的處理函式新增到任務佇列中(巨集任務還在執行,瀏覽器會幫忙計時,到達實踐後將處理函式新增到任務佇列中,好比巨集任務執行的總時間是100ms,而定時器的時間是10ms,那麼在定時器開啟後的10ms,會將事件新增到任務佇列中,當100ms的巨集任務執行完後,才會依次執行任務佇列中的每個事件)。ajax網路請求的時候,通過網路獲取到資料的時候,將處理函式新增到任務佇列中。所以這個事件是要競爭的,誰先達到條件誰先新增到任務佇列中。

(4)當遇到promise微任務的時候,比如promise.resolve().then()方法或者promise物件的then方法,這是微任務,新增到微任務佇列,當然也是按順序新增到微任務佇列的。

(5)當巨集任務執行結束後,一次性按順序將微任務佇列中的事件執行

(6)然後開始執行任務佇列中的任務,先執行任務佇列中的第乙個任務,該任務的執行也是按上述的方式,微任務新增到微任務佇列中,定時器和ajax事件新增到之前說的那個任務佇列中,繼續執行下去

注意:所有的定時器和ajax這種非同步的事件,當達到條件後新增任務佇列中,進行事件執行先後的排序。所以對於非同步事件,我們不能看他什麼時候開啟的,而是什麼時候達到新增條件的,將其新增到任務佇列中。

上面**執行的思維導圖:

任務列隊和event loop(事件迴圈)

1.所有的同步任務都在主線程上執行,行成乙個執行棧。2.除了主線程之外,還存在乙個任務列隊,只要非同步任務有了執行結果,就在任務列隊中植入乙個時間標記。3.主線程完成所有任務 執行棧清空 就會讀取任務列隊,先執行微任務佇列在執行巨集任務佇列。4.重複上面三步。只要主線程空了,就會讀取任務列隊,這就是...

事件迴圈2(微任務 和巨集任務)

js是單執行緒,一次只能執行乙個任務,當有乙個耗時很長時,有乙個在後面等待,會造成堵塞,非同步的目的就是處理堵塞,提公升效能。一 promise物件 promise呼叫內部函式。promise有三種物件 1.pending 待定,未初始化 2.resolved 非同步成功 3.rejected 非同...

事件迴圈 巨集任務 微任務

在js中我們經常會需要 同時 進行多項工作,例如 定時器 事件 非同步資料互動等,那麼js是如何管理這些任務的,又是如何確定他們的執行順序的?首先,所有的語言都擁有併發模型的概念,也就是說多個任務如何同時執行,大部分語言支援多執行緒執行,js擁有所有語言中最簡單的併發模型 js使用單執行緒的 事件迴...