欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

JS的執(zhí)行機制(EventLoop、宏任務和微任務)

 更新時間:2023年01月20日 10:55:14   作者:努力學習前端的小陳  
這篇文章主要介紹了JS的執(zhí)行機制(EventLoop、宏任務和微任務),具有很好的參考價值,希望對大家有所幫助。

1、EventLoop

1. JavaScript 是單線程的語言

JavaScript 是一門單線程執(zhí)行的編程語言。

也就是說,同一時間只能做一件事情。

單線程執(zhí)行任務隊列的問題:

如果前一個任務非常耗時,則后續(xù)的任務就不得不一直等待,從而導致程序假死的問題。

2. 同步任務和異步任務

為了防止某個耗時任務導致程序假死的問題,JavaScript 把待執(zhí)行的任務分為了兩類:

①  同步任務(synchronous)

又叫做非耗時任務,指的是在主線程上排隊執(zhí)行的那些任務只有前一個任務執(zhí)行完畢, 才能執(zhí)行后一個任務

②  異步任務(asynchronous)

又叫做耗時任務,異步任務由 JavaScript 委托給 宿主環(huán)境進行執(zhí)行當異步任務執(zhí)行完成后,會通知 JavaScript 主線程執(zhí)行異步任務的回調函 數(shù)  

3. 同步任務和異步任務的執(zhí)行過程

① 同步任務由 JavaScript 主線程次序執(zhí)行

② 異步任務委托給宿主環(huán)境執(zhí)行

③ 已完成的異步任務對應的回調函數(shù),會被加入到任務隊列中等待執(zhí)行

④ JavaScript 主線程的執(zhí)行棧被清空后,會 讀取任務隊列中的回調函數(shù),次序執(zhí)行

⑤ JavaScript 主線程不斷重復上面的第 4 步

 4. EventLoop 的基本概念

JavaScript 主線程從“任務隊列”中讀取異步

任務的回調函數(shù),放到執(zhí)行棧中依次執(zhí)行。這 個過程是循環(huán)不斷的,所以整個的這種運行機 制又稱為EventLoop(事件循環(huán))。

 5. 結合 EventLoop 分析輸出的順序

正確的輸出結果:ADCB。

其中:

A和D屬于同步任務 。

會根據(jù)代碼的先后順序依次被執(zhí)行C和B屬于異步任務。

它們的回調函數(shù)會被加入到任務隊列中,等待主線程空閑時再執(zhí)行

2、宏任務和微任務 

1.什么是宏任務和微任務

JavaScript 把異步任務又做了進一步的劃分,異步任務又分為兩類,分別是:

① 宏任務(macrotask)

異 步 Ajax 請求、 setTimeout 、 setInterval 、 文件操作 其它宏任務

② 微任務(microtask)

Promise.then 、 .catch 和 .finally process.nextTick 其它微任務

2. 宏任務和微任務的執(zhí)行順序

每一個宏任務執(zhí)行完之后,都會檢查是否存在待執(zhí)行的微任務,

如果有,則執(zhí)行完所有微任務之后,再繼續(xù)執(zhí)行下一個宏任務。

3. 去銀行辦業(yè)務的場景(舉例)

① 小云和小騰去銀行辦業(yè)務。首先,需要取號之后進行排隊

宏任務隊列

② 假設當前銀行網(wǎng)點只有一個柜員,小云在辦理存款業(yè)務時,小騰只能等待

單線 程 ,宏任 務 按次 序 執(zhí)行

③ 小云辦完存款業(yè)務后,柜員詢問他是否還想辦理其它業(yè)務?

當前宏任務執(zhí)行完 , 檢 查是 否 有微 任 務

④ 小云告訴柜員:想要買理財產品、再辦個信用卡、最后再兌換點馬年紀念幣?

執(zhí)行微任務,后 續(xù) 宏 任 務被 推 遲

⑤ 小云離開柜臺后,柜員開始為小騰辦理業(yè)務

所有微任務執(zhí)行完 畢 , 開 始 執(zhí) 行下 一 個 宏 任務  

4. 分析以下代碼輸出的順序

正確的輸出順序是:2431

分析:

① 先執(zhí)行所有的同步任務

執(zhí)行第 6 行、第 12 行代碼

② 再執(zhí)行微任務

執(zhí)行第 9 行代碼

③ 再執(zhí)行下一個宏任務

執(zhí)行 第 2 行代碼

5. 經(jīng)典面試題

請分析以下代碼輸出的順序(代碼較長,截取成了左中右 3 個部分) :

正確的輸出順序是:156234789 

總結

以上為個人經(jīng)驗,希望能給大家一個參考,也希望大家多多支持腳本之家。

相關文章

  • cypress e2e測試編寫注意點總結分析

    cypress e2e測試編寫注意點總結分析

    這篇文章主要為大家介紹了cypress e2e測試編寫注意點總結分析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪
    2023-04-04
  • JavaScript中的預解析你了解嗎

    JavaScript中的預解析你了解嗎

    預解析也叫預聲明,是提前解析聲明的意思,預解析是針對變量和函數(shù)來說的,本文將通過一些簡單的示例帶大家了解一下JS中預解析的具體使用,需要的可以參考一下
    2023-05-05
  • JavaScript中關于遞歸與回溯的實例詳解

    JavaScript中關于遞歸與回溯的實例詳解

    這篇文章主要將為大家介紹一下JavaScript中遞歸與回溯的原理及使用,文中通過一些例題進行了詳細介紹,感興趣的小伙伴可以跟隨小編一起學習一下
    2022-07-07
  • js打印紙函數(shù)代碼(遞歸)

    js打印紙函數(shù)代碼(遞歸)

    js打印紙函數(shù)代碼,獲取并設置打印紙的具體信息的代碼,需要的朋友可以參考下。
    2010-06-06
  • js 對象使用的小技巧實例分析

    js 對象使用的小技巧實例分析

    這篇文章主要介紹了js 對象使用的小技巧,結合實例形式分析了JavaScript對象的遍歷、查找、事件監(jiān)聽等相關操作技巧,需要的朋友可以參考下
    2019-11-11
  • Markdown與Bootstrap相結合實現(xiàn)圖片自適應屬性

    Markdown與Bootstrap相結合實現(xiàn)圖片自適應屬性

    Markdown 是一種輕量級的標記語言,它的優(yōu)點很多,目前也被越來越多的寫作愛好者,撰稿者廣泛使用。接下來通過本文給大家介紹Markdown與Bootstrap相結合實現(xiàn)圖片自適應屬性,感興趣的朋友一起學習吧
    2016-05-05
  • JS樹形菜單組件Bootstrap TreeView使用方法詳解

    JS樹形菜單組件Bootstrap TreeView使用方法詳解

    這篇文章主要為大家詳細介紹了js組件Bootstrap TreeView使用方法,本文一部分針對于bootstrap的treeview的實踐,另一部分是介紹自己寫的樹形菜單,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2016-12-12
  • JS實現(xiàn)發(fā)送短信驗證后按鈕倒計時功能(防止刷新倒計時失效)

    JS實現(xiàn)發(fā)送短信驗證后按鈕倒計時功能(防止刷新倒計時失效)

    這篇文章主要介紹了JS實現(xiàn)發(fā)送短信驗證后按鈕倒計時功能防止刷新倒計時失效問題,在項目開發(fā)中經(jīng)常會用到此功能,下面小編通過本文給大家分享JS實現(xiàn)發(fā)送短信驗證后按鈕倒計時功能(防止刷新倒計時失效),需要的朋友參考下吧
    2017-07-07
  • 微信小程序pinker組件使用實現(xiàn)自動相減日期

    微信小程序pinker組件使用實現(xiàn)自動相減日期

    這篇文章主要介紹了微信小程序pinker組件使用實現(xiàn)自動相減日期,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧
    2020-05-05
  • JS動態(tài)添加與刪除select中的Option對象(示例代碼)

    JS動態(tài)添加與刪除select中的Option對象(示例代碼)

    本篇文章主要介紹了JS動態(tài)添加與刪除select中的Option對象示例代碼。需要的朋友可以過來參考下,希望對大家有所幫助
    2013-12-12

最新評論