js內部事件機制 單執行緒原理

2022-07-04 07:54:10 字數 2019 閱讀 5071

主線程從 script (整體**)開始第一次迴圈。之後全域性上下文進入函式呼叫棧。直到呼叫棧清空(只剩全域性),然後執行所有的 jobs。當所有可執行的 jobs 執行完畢之後。迴圈再次從 task 開始,找到其中乙個任務佇列執行完畢,然後再執行所有的 jobs,這樣一直迴圈下去。

示例詳解:

// let's get hold of those elements

var outer = document.queryselector('.outer');

var inner = document.queryselector('.inner');

// let's listen for attribute changes on the

// outer element

new mutationobserver(function() ).observe(outer, );

// here's a click listener…

function onclick() , 0);

promise.resolve().then(function() );

outer.setattribute('data-random', math.random());

}// …which we'll attach to both elements

inner.addeventlistener('click', onclick);

outer.addeventlistener('click', onclick);

// 輸出結果

click

mutate

click

mutate

promise

promise

timeout

timeout

// let's get hold of those elements

var outer = document.queryselector('.outer');

var inner = document.queryselector('.inner');

// let's listen for attribute changes on the

// outer element

new mutationobserver(function() ).observe(outer, );

// here's a click listener…

function onclick() , 0);

promise.resolve().then(function() );

outer.setattribute('data-random', math.random());

}// …which we'll attach to both elements

inner.addeventlistener('click', onclick);

outer.addeventlistener('click', onclick);

inner.click();

// 輸出結果

click

click

mutate

promise

promise

timeout

timeout

由於點選事件是 js 執行的,inner 的 onclick 函式執行完成時,inner.click() 語句的作用域還沒有退棧,主線程呼叫棧不是空的,導致 jobs 佇列任務不會執行,mutate 和 promise 語句都未能在事件迴圈中執行到。從而執行了 outer 的 onclick 函式。outer 的 onclick 函式執行完成後,inner.click() 語句才退棧,繼而執行 jobs 的任務。

只有乙個 mutate 是由於 jobs 佇列中,只能有乙個 mutationobserver 任務,第二次建立時,前乙個 mutationobserver 任務沒有執行,顧不再建立。

js 單執行緒 非同步

執行緒與程序 程序是系統資源分配和排程的單元。乙個執行著的程式就對應乙個程序。在windows中,每乙個開啟的執行的應用程式或後台程式,比如執行中的qq,谷歌瀏覽器,網易雲 資源管理器等都是乙個程序。乙個程序包括了執行中的程式和程式所使用到的記憶體和系統資源。比如,邊聽 邊在寫部落格,這 就是開了兩...

JS 非同步與單執行緒)

js 非同步與單執行緒 題目1.同步和非同步的區別是什麼,試舉例 例子見知識點 區別 1.同步會阻塞 執行,而非同步不會 2.alert 是同步,settimeout 是非同步 題目2.關於 settimeout 結果 1 3 5 2 4 題目3.前端使用非同步的場景有哪些 1.定時任務 setti...

js單執行緒,事件迴圈,微任務巨集任務

js單執行緒 js是單執行緒的語言,所謂 單執行緒 就是一根筋,對於拿到的程式,一行一行的執行,直到上面的執行為完成,只能做這一件事 事件迴圈 event loop 事件迴圈 中,每一次迴圈稱為 tick,每一次tick的任務如下 執行棧選擇最先進入佇列的巨集任務 通常是script整體 如果有則執...