JavaScript中EventLoop介紹
想象下,比如瀏覽器在運(yùn)行一個(gè)復(fù)雜的圖像轉(zhuǎn)換算法,因?yàn)槭菃尉€程的,所以此時(shí)瀏覽器進(jìn)程被阻塞了,不能進(jìn)行界面渲染,也不能運(yùn)行其他代碼,你的應(yīng)用界面會(huì)失去和用戶的交互。
這一般情況下還不會(huì)有大問題,但是當(dāng)瀏覽器在同時(shí)運(yùn)行多個(gè)類似的算法時(shí),這個(gè)問題就很嚴(yán)重了。
有一定經(jīng)驗(yàn)js開發(fā)人員大多都理解代碼的異步執(zhí)行,特別是ajax的使用。
// ajax(..) is some arbitrary Ajax function given by a library var response = ajax('https://example.com/api'); console.log(response); // `response` won't have the response
這里response 將不會(huì)得到你想要的結(jié)果。
而是需要像相面這樣,通過 callback函數(shù)的方式,獲取結(jié)果
ajax('https://example.com/api', function(response) { console.log(response); // `response` is now available });
另外這里面提醒一下,下面的代碼, async: false永遠(yuǎn)都不是一個(gè)好主意。
// This is assuming that you're using jQuery jQuery.ajax({ url: 'https://api.example.com/endpoint', success: function(response) { // This is your callback. }, async: false // And this is a terrible idea });
通過上面的例子,我們應(yīng)該理解通過 異步 函數(shù),可以幫助我們解決 類似瀏覽器阻塞問題。
當(dāng)然還可以通過 setTimeout(callback, milliseconds)實(shí)現(xiàn)同樣的邏輯。如果你理解了異步,下面代碼執(zhí)行會(huì)輸出什么呢?
function first() { console.log('first'); } function second() { console.log('second'); } function third() { console.log('third'); } first(); setTimeout(second, 1000); // Invoke `second` after 1000ms third();
那個(gè)這下異步處理機(jī)制的原理是什么呢?這里就要引入我們的事件循環(huán)Event Loop了
Event Loop有一個(gè)簡單的Job(task) - 監(jiān)視Call Stack和Callback Queue。如果調(diào)用堆棧為空,它將從隊(duì)列中取出第一個(gè)事件,并將其推送到調(diào)用堆棧,從而有效地運(yùn)行它。
這種迭代在事件循環(huán)中被稱為Tick。每個(gè)事件只是一個(gè)函數(shù)回調(diào)。
console.log('Hi'); setTimeout(function cb1() { console.log('cb1'); }, 5000); console.log('Bye');
執(zhí)行這段代碼,下面的調(diào)用棧清楚的演示了事件循環(huán)的處理流程。
請注意,setTimeout(...)不會(huì)自動(dòng)將您的回調(diào)放在事件循環(huán)隊(duì)列中。
它設(shè)置了一個(gè)計(jì)時(shí)器。當(dāng)計(jì)時(shí)器到期時(shí),瀏覽器將你的回調(diào)放到事件循環(huán)中,以便將來的一些tick會(huì)執(zhí)行。但是,隊(duì)列中可能還有其他事件已經(jīng)被添加了 - 您的回調(diào)將不會(huì)立即執(zhí)行。
有很多關(guān)于開始使用JavaScript中的異步代碼的文章和教程,建議您使用setTimeout(callback,0)。
現(xiàn)在你知道Event Loop是怎么做的,以及setTimeout是如何工作的。
你就能更好的理解下面的代碼
console.log('Hi'); setTimeout(function() { console.log('callback'); }, 0); console.log('Bye');
盡管等待時(shí)間設(shè)置為0 ms,但瀏覽器控制臺(tái)中的結(jié)果如下所示:
Hi
Bye
callback
相關(guān)文章
JS實(shí)現(xiàn)的按鈕點(diǎn)擊顏色切換功能示例
這篇文章主要介紹了JS實(shí)現(xiàn)的按鈕點(diǎn)擊顏色切換功能,涉及js鼠標(biāo)事件響應(yīng)及頁面元素屬性動(dòng)態(tài)操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2017-10-10JavaScript cookie的設(shè)置獲取刪除詳解
這篇文章主要介紹了JavaScript cookie的設(shè)置獲取刪除等等,,需要的朋友可以參考下2014-02-02使用JavaScript優(yōu)雅實(shí)現(xiàn)文本展開收起功能
這篇文章主要為大家詳細(xì)介紹了如何使用JavaScript優(yōu)雅實(shí)現(xiàn)文本展開收起功能,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-04-04js事件on動(dòng)態(tài)綁定數(shù)據(jù),綁定多個(gè)事件的方法
今天小編就為大家分享一篇js事件on動(dòng)態(tài)綁定數(shù)據(jù),綁定多個(gè)事件的方法,具有很好的參考價(jià)值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09JavaScript函數(shù)參數(shù)使用帶參數(shù)名的方式賦值傳入的方法
這篇文章主要介紹了JavaScript函數(shù)參數(shù)使用帶參數(shù)名的方式賦值傳入的方法,實(shí)例分析了javascript函數(shù)傳遞參數(shù)的使用技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-03-03