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

javascript異步處理工作機制詳解

 更新時間:2015年04月13日 09:43:54   投稿:hebedich  
籠統(tǒng)地說,異步在javascript就是延時執(zhí)行。嚴格來說,javascript中的異步編程能力都是由BOM與DOM提供的,如setTimeout,XMLHttpRequest,還有DOM的事件機制,等等很多。這些東西都有一個共同的特點,就是擁有一個回調(diào)函數(shù),實現(xiàn)控制反轉。

從基礎的層面來講,理解JavaScript的定時器是如何工作的是非常重要的。計時器的執(zhí)行常常和我們的直觀想象不同,那是因為JavaScript引擎是單線程的。我們先來認識一下下面三個函數(shù)是如何控制計時器的。

var id = setTimeout(fn, delay); - 初始化一個計時器,然后在指定的時間間隔后執(zhí)行。該函數(shù)返回一個唯一的標志ID(Number類型),我們可以使用它來取消計時器。
var id = setInterval(fn, delay); - 和setTimeout有些類似,但它是連續(xù)調(diào)用一個函數(shù)(時間間隔是delay參數(shù))直到它被取消。
clearInterval(id);, clearTimeout(id); - 使用計時器ID(setTimeout 和 setInterval的返回值)來取消計時器回調(diào)的發(fā)生
為了理解計時器的內(nèi)在執(zhí)行原理,有一個重要的概念需要加以探討:計時器的延遲(delay)是無法得到保障的。由于所有JavaScript代碼是在一個線程里執(zhí)行的,所有異步事件(例如,鼠標點擊和計時器)只有擁有執(zhí)行機會時才會執(zhí)行。

在這個圖表中有許多信息需要理解,如果完全理解了它們,你會對JavaScript引擎如何實現(xiàn)異步事件有一個很好的認識。這是一個一維的圖標:垂 直方向表示時間,藍色的區(qū)塊表示JavaScript代碼執(zhí)行塊。例如第一個JavaScript代碼執(zhí)行塊需要大約18ms,鼠標點擊所觸發(fā)的代碼執(zhí)行 塊需要11ms,等等。

由于JavaScript引擎同一時間只執(zhí)行一條代碼(這是由于JavaScript單線程的性質),所以每一個JavaScript代碼執(zhí)行塊會 “阻塞”其它異步事件的執(zhí)行。這就意味著當一個異步事件發(fā)生(例如,鼠標點擊,計時器被觸發(fā),或者Ajax異步請求)后,這些事件的回調(diào)函數(shù)將排在執(zhí)行隊 列的最后等待執(zhí)行(實際上,排隊的方式根據(jù)瀏覽器的不同而不同,所以這里只是一個簡化);

從第一個JavaScript執(zhí)行塊開始研究,在第一個執(zhí)行塊中兩個計時器被初始化:一個10ms的setTimeout()和一個10ms的setInterval()。 依據(jù)何時何地計時器被初始化(計時器初始化完畢后就會開始計時),計時器實際上會在第一個代碼塊執(zhí)行完畢前被觸發(fā)。但是,計時器上綁定的函數(shù)不會立即執(zhí)行 (不被立即執(zhí)行的原因是JavaScript是單線程的)。實際上,被延遲的函數(shù)將依次排在執(zhí)行隊列的最后,等待下一次恰當?shù)臅r間再執(zhí)行。

此外,在第一個JavaScript執(zhí)行塊中我們看到了一個“鼠標點擊”事件發(fā)生了。一個JavaScript回調(diào)函數(shù)綁定在這個異步事件上了(我 們從來不知道用戶什么時候執(zhí)行這個(點擊)事件,因此認為它是異步的),這個函數(shù)不會被立即執(zhí)行,和上面的計時器一樣,它將排在執(zhí)行隊列的最后,等待下一 次恰當?shù)臅r候執(zhí)行。

當?shù)谝粋€JavaScript執(zhí)行塊執(zhí)行完畢后,瀏覽器會立即問一個問題:哪個函數(shù)(語句)在等待被執(zhí)行?在這時,一個“鼠標點擊事件處理函數(shù)”和 一個“計時器回調(diào)函數(shù)”都在等待執(zhí)行。瀏覽器會選擇一個(實際上選擇了“鼠標點擊事件的處理函數(shù)”,因為由圖可知它是先進隊的)立即執(zhí)行。而“計時器回調(diào) 函數(shù)”將等待下次適合的時間執(zhí)行。

注意,當“鼠標點擊事件處理函數(shù)”執(zhí)行的時候,setInterval的回調(diào)函數(shù)第一次被觸發(fā)了。和setTimeout的回調(diào)函數(shù)一樣,它將排到執(zhí)行隊列的最后等待執(zhí)行。但是,一定要注意這一點:當setInterval回調(diào)函數(shù)第二次被觸發(fā)時(此時setTimeout函數(shù)仍在執(zhí)行)setInterval的第一次觸發(fā)將被拋棄掉。當一個很長的代碼塊在執(zhí)行時,可能把所有的setInterval回調(diào)函數(shù)都排在執(zhí)行隊列的后面,代碼塊執(zhí)行完之后,結果便會是一大串的setInterval回調(diào)函數(shù)等待執(zhí)行,并且這些函數(shù)之間沒有間隔,直到全部完成。所以,瀏覽器傾向于的當沒有更多interval的處理函數(shù)在排隊時再將下一個處理函數(shù)排到隊尾(這是由于間隔的問題)。

我們能夠發(fā)現(xiàn),當?shù)谌齻€setInterval回調(diào)函數(shù)被觸發(fā)時,之前的setInterval回調(diào)函數(shù)仍在執(zhí)行。這就說明了一個很重要的事實:setInterval不會考慮當前正在執(zhí)行什么,而把所有的堵塞的函數(shù)排到隊列尾部。這意味著兩次setInterval回調(diào)函數(shù)之間的時間間隔會被犧牲掉(縮減)。

最后,當?shù)诙€setInterval回調(diào)函數(shù)執(zhí)行完畢后,我們可以看到?jīng)]有任何程序等待JavaScript引擎執(zhí)行了。這就意味著瀏覽器現(xiàn)在在等待一個新的異步事件的發(fā)生。在50ms時一個新的setInterval回調(diào)函數(shù)再次被觸發(fā),這時,沒有任何的執(zhí)行塊阻塞它的執(zhí)行了。所以它會立刻被執(zhí)行。

讓我們用一個例子來闡明setTimeout和setInterval之間的區(qū)別:

 setTimeout ( function ( ) { 
   /* Some long block of code... */ 
  setTimeout (arguments. callee, 10 ); 
  }, 10 ); 
  
 setInterval ( function ( ) { 
   /* Some long block of code... */ 
  }, 10 );
 

這兩句代碼乍一看沒什么差別,但是它們是不同的。setTimeout回調(diào)函數(shù)的執(zhí)行和上一次執(zhí)行之間的間隔至少有10ms(可能會更多,但不會少于10ms),而setInterval的回調(diào)函數(shù)將嘗試每隔10ms執(zhí)行一次,不論上次是否執(zhí)行完畢。

在這里我們學到了很多知識,總結一下:

JavaScript引擎是單線程的,強制所有的異步事件排隊等待執(zhí)行
setTimeout 和 setInterval 在執(zhí)行異步代碼的時候有著根本的不同
如果一個計時器被阻塞而不能立即執(zhí)行,它將延遲執(zhí)行直到下一次可能執(zhí)行的時間點才被執(zhí)行(比期望的時間間隔要長些)
如果setInterval回調(diào)函數(shù)的執(zhí)行時間將足夠長(比指定的時間間隔長),它們將連續(xù)執(zhí)行并且彼此之間沒有時間間隔。

以上所述就是本文的全部內(nèi)容了,希望能夠對大家學習javascript異步處理有所幫助。

相關文章

最新評論