分析JS單線程異步io回調(diào)的特性
我們最開(kāi)始接觸javascript應(yīng)該大部分是從html中的js腳本開(kāi)始,但是這種看似簡(jiǎn)單的語(yǔ)言稀里糊涂的用了好幾年,也沒(méi)有搞清楚它的一些原理機(jī)制,有沒(méi)有躺槍!
起碼javascript在操作dom的時(shí)候用了各種事件回調(diào),比如按鈕,鏈接的點(diǎn)擊,鼠標(biāo)經(jīng)過(guò),獲取焦點(diǎn)等等.
在這個(gè)過(guò)程中,我們?cè)赿om上綁定一個(gè)事件回調(diào)函數(shù) 比如 onclick="doCheck()" 這個(gè)過(guò)程就是給dom元素注冊(cè)了一個(gè)click 事件,并且綁定了一個(gè)事件回調(diào)函數(shù) doCheck().
當(dāng)鼠標(biāo)點(diǎn)擊這個(gè)元素的時(shí)候,觸發(fā)了事件,馬上執(zhí)行事件綁定函數(shù)并回.
再后來(lái)是接觸到j(luò)query 的時(shí)候,大量的
$("#id").click(function(){ alert('點(diǎn)擊事件'); });
這種jquery的語(yǔ)法寫(xiě)的越來(lái)越多似乎已經(jīng)習(xí)慣了,但是你是都留意過(guò)前面的選擇器只是選擇過(guò)濾dom節(jié)點(diǎn),接著的click就是一個(gè)事件注冊(cè),而里面的 function(){} 其實(shí)是一個(gè)參數(shù),事件綁定函數(shù)的參數(shù),這里面就要求你熟悉javascript的語(yǔ)法了.
function在javascript中是一個(gè)對(duì)象,對(duì)象就可以指世界的萬(wàn)事萬(wàn)物,所以對(duì)象可以包含很多屬性,方法等.
既然是對(duì)象,那就可以當(dāng)做一個(gè)參數(shù)去傳遞,這種函數(shù)叫做 高階函數(shù).
而且這種函數(shù)沒(méi)有定義名稱對(duì)不對(duì),當(dāng)然你可以一個(gè)名稱,然后把名稱傳過(guò)來(lái)也是一樣的,但是沒(méi)有意義,因?yàn)檫@里的函數(shù)對(duì)象其實(shí)是一個(gè)形參,所以我們習(xí)慣的不給這種函數(shù)起名字,這就是常說(shuō)的匿名函數(shù).
接著上面的$("#id").click 說(shuō)起,當(dāng)點(diǎn)擊事件被觸發(fā)時(shí),就要執(zhí)行事件綁定函數(shù).和上面直接在dom上給定onclick方法是一樣的效果.
假設(shè)瀏覽器里有多個(gè)線程去操作腳本的話,你能想象到他的亂嗎? 線程一正要去修改元素A的value值,結(jié)果沒(méi)想到線程二已經(jīng)把元素A從dom樹(shù)刪除節(jié)點(diǎn),這時(shí)線程一只好操作失敗報(bào)錯(cuò).這樣的情況是不糟透了,要么瀏覽器無(wú)維護(hù)多個(gè)線程數(shù)據(jù)的一致性,要么前端工程師自己去維護(hù),所以......瀏覽器只有一個(gè)線程去操作dom,這樣省去了很多不必要的麻煩.
setTimeout(function(){ alert('彈出'); },300); while(true){ ........ }
你覺(jué)得 300毫秒后 alert('彈出') 還有戲嗎?
沒(méi)有了,永遠(yuǎn)沒(méi)有戲了,等待300毫秒只是騙取你的感情的.因?yàn)闉g覽器是單線程模式執(zhí)行腳本.
一旦線程處于死循環(huán)模式下去執(zhí)行 while 語(yǔ)句,你的setTimeout 再也不會(huì)起任何作用了.
進(jìn)而我們走入了 node.js 世界,它完全保留了javascript在瀏覽器的特性,單線程異步回調(diào),也正是因?yàn)檫@個(gè)特點(diǎn)它才是它,假如node.js 是一門同步語(yǔ)言,就算所有的npm包都是 c++ 擴(kuò)展的(速度夠快吧)再快你也比不過(guò)c語(yǔ)言處理速度是不是,那么node.js可能還沒(méi)有出世就已經(jīng)被php鄙視了.
正是因?yàn)樗漠惒交卣{(diào)IO,更能提高他的效率,讓我想起以前學(xué)校的一種快餐店和學(xué)校食堂的對(duì)比情況:
食堂是所有學(xué)生拿著盤(pán)子在窗口排成一字型隊(duì),打飯的妹妹一個(gè)一個(gè)盛好了,挨個(gè)端上飯走了.這是同步處理結(jié)果.
學(xué)??觳偷暌彩菍W(xué)生排隊(duì)點(diǎn)餐,但是點(diǎn)完餐拿上你的呼叫器就可以離開(kāi)找位置去了.這樣單位時(shí)間內(nèi)服務(wù)員可以為很多人提供服務(wù),而且點(diǎn)好餐的同學(xué)可以找位置做自己其他事情,而不用傻傻地站到窗口等飯,直到你的飯出來(lái)的那一剎那,服務(wù)器會(huì)根據(jù)單號(hào)按下編碼,這時(shí)你桌上的呼叫器會(huì)響起,你去取餐就好了.這是異步處理.那個(gè)呼叫器響起就是觸發(fā)事件.
單線程可以減少多線程之間狀態(tài)切換引起的資源浪費(fèi)和維護(hù)困難,當(dāng)然也有專門的第三方包來(lái)支持多核多線程的情景,你可以自己權(quán)衡.
以上就是關(guān)于JS單線程回調(diào)的全部信息內(nèi)容,如有大家在學(xué)習(xí)的時(shí)候還有其他的疑問(wèn),可以在下面的留言區(qū)域討論。
相關(guān)文章
關(guān)于JavaScript反調(diào)試與混淆識(shí)別舉例詳解
JS代碼混淆是一種保護(hù)代碼安全的重要手段,通過(guò)將代碼轉(zhuǎn)換為難以理解和閱讀的形式,增加代碼被盜用和逆向工程的難度,這篇文章主要介紹了關(guān)于JavaScript反調(diào)試與混淆識(shí)別的相關(guān)資料,需要的朋友可以參考下2025-06-06微信小程序?qū)崿F(xiàn)簡(jiǎn)單跑馬燈效果
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)簡(jiǎn)單跑馬燈效果 ,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2018-12-12教你如何使用firebug調(diào)試功能了解javascript閉包和this
這篇文章主要介紹了教你如何使用firebug調(diào)試功能了解javascript閉包和this,javascript的調(diào)試也是一個(gè)比較大的難點(diǎn),很多基礎(chǔ)的東西都需要自己去摸索,這里將自己的經(jīng)驗(yàn)分享給大家,希望對(duì)大家能夠有所幫助2015-03-03Javascript中的for in循環(huán)和hasOwnProperty結(jié)合使用
當(dāng)檢測(cè)某個(gè)對(duì)象是否擁有某個(gè)屬性時(shí),hasOwnProperty 是唯一可以完成這一任務(wù)的方法,在 for in 循環(huán)時(shí),建議增加 hasOwnProperty 進(jìn)行判斷,可以有效避免擴(kuò)展本地原型而引起的錯(cuò)誤2013-06-06js實(shí)現(xiàn)短信發(fā)送倒計(jì)時(shí)功能(正則驗(yàn)證)
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)短信發(fā)送倒計(jì)時(shí)功能,包含正則驗(yàn)證,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-02-02微信小程序三級(jí)聯(lián)動(dòng)地址選擇器的實(shí)例代碼
本篇文章主要介紹了微信小程序三級(jí)聯(lián)動(dòng)地址選擇器的實(shí)例代碼,具有一定的參考價(jià)值,有興趣的可以了解一下2017-07-07