這篇文章主要介紹了JavaScript中EventLoop有什么用,具有一定借鑒價值,感興趣的朋友可以參考下,希望大家閱讀完這篇文章之后大有收獲,下面讓小編帶著大家一起了解一下。
想象下,比如瀏覽器在運行一個復(fù)雜的圖像轉(zhuǎn)換算法,因為是單線程的,所以此時瀏覽器進程被阻塞了,不能進行界面渲染,也不能運行其他代碼,你的應(yīng)用界面會失去和用戶的交互。
這一般情況下還不會有大問題,但是當瀏覽器在同時運行多個類似的算法時,這個問題就很嚴重了。
有一定經(jīng)驗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 將不會得到你想要的結(jié)果。
而是需要像相面這樣,通過 callback函數(shù)的方式,獲取結(jié)果
ajax('https://example.com/api', function(response) { console.log(response); // `response` is now available });
另外這里面提醒一下,下面的代碼, async: false永遠都不是一個好主意。
// 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ù),可以幫助我們解決 類似瀏覽器阻塞問題。
當然還可以通過 setTimeout(callback, milliseconds)實現(xiàn)同樣的邏輯。如果你理解了異步,下面代碼執(zhí)行會輸出什么呢?
function first() { console.log('first'); } function second() { console.log('second'); } function third() { console.log('third'); } first(); setTimeout(second, 1000); // Invoke `second` after 1000ms third();
那個這下異步處理機制的原理是什么呢?這里就要引入我們的事件循環(huán)Event Loop了
Event Loop有一個簡單的Job(task) - 監(jiān)視Call Stack和Callback Queue。如果調(diào)用堆棧為空,它將從隊列中取出第一個事件,并將其推送到調(diào)用堆棧,從而有效地運行它。
這種迭代在事件循環(huán)中被稱為Tick。每個事件只是一個函數(shù)回調(diào)。
console.log('Hi'); setTimeout(function cb1() { console.log('cb1'); }, 5000); console.log('Bye');
執(zhí)行這段代碼,下面的調(diào)用棧清楚的演示了事件循環(huán)的處理流程。
請注意,setTimeout(...)不會自動將您的回調(diào)放在事件循環(huán)隊列中。
它設(shè)置了一個計時器。當計時器到期時,瀏覽器將你的回調(diào)放到事件循環(huán)中,以便將來的一些tick會執(zhí)行。但是,隊列中可能還有其他事件已經(jīng)被添加了 - 您的回調(diào)將不會立即執(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è)置為0 ms,但瀏覽器控制臺中的結(jié)果如下所示:
Hi
Bye
callback
感謝你能夠認真閱讀完這篇文章,希望小編分享的“JavaScript中EventLoop有什么用”這篇文章對大家有幫助,同時也希望大家多多支持創(chuàng)新互聯(lián)成都網(wǎng)站設(shè)計公司,關(guān)注創(chuàng)新互聯(lián)成都網(wǎng)站設(shè)計公司行業(yè)資訊頻道,更多相關(guān)知識等著你來學習!
另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn,海內(nèi)外云服務(wù)器15元起步,三天無理由+7*72小時售后在線,公司持有idc許可證,提供“云服務(wù)器、裸金屬服務(wù)器、網(wǎng)站設(shè)計器、香港服務(wù)器、美國服務(wù)器、虛擬主機、免備案服務(wù)器”等云主機租用服務(wù)以及企業(yè)上云的綜合解決方案,具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價比高”等特點與優(yōu)勢,專為企業(yè)上云打造定制,能夠滿足用戶豐富、多元化的應(yīng)用場景需求。
網(wǎng)頁標題:JavaScript中EventLoop有什么用-創(chuàng)新互聯(lián)
轉(zhuǎn)載來于:http://vcdvsql.cn/article16/ddjgdg.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供網(wǎng)站設(shè)計公司、自適應(yīng)網(wǎng)站、軟件開發(fā)、靜態(tài)網(wǎng)站、App設(shè)計、搜索引擎優(yōu)化
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)
猜你還喜歡下面的內(nèi)容