高級(jí)定時(shí)器---《高程3》

miya 發(fā)布于2019-08-20 11:30 / 2930人閱讀

摘要：也就是說(shuō)，代碼隊(duì)列中僅能有一個(gè)間歇定時(shí)器在等待。這導(dǎo)致兩個(gè)問(wèn)題，一是某些間隔會(huì)跳過(guò)，二是多個(gè)定時(shí)器的代碼之間的間隔可能比預(yù)期的小。

定時(shí)器：間歇調(diào)用和超時(shí)調(diào)用

超時(shí)調(diào)用：setTimeout()，接受兩個(gè)參數(shù)，第一個(gè)參數(shù)是可執(zhí)行的JavaScript代碼字符串，或是回調(diào)函數(shù)，第二個(gè)參數(shù)是毫秒為單位的插入代碼隊(duì)列的的時(shí)間。
清除方式：clearTimeout()，參數(shù)是設(shè)置setTimeout時(shí)返回的數(shù)值ID。

var timeId = setTimeout(function(){
    alert("hello world");    
}, 5000);
clearTimeout(timeId);

間歇調(diào)用：setInterval()，接受的兩個(gè)參數(shù)和setTimeout()類似，只是時(shí)間參數(shù)代表兩次間隔插入代碼隊(duì)列的的時(shí)間。
清除方式：clearInterval()，參數(shù)是設(shè)置間歇調(diào)用時(shí)返回的數(shù)值ID。清除間歇調(diào)用很重要，因?yàn)椴磺宄蜁?huì)一直執(zhí)行，也就是一直在JavaScript的時(shí)間線中。因?yàn)镴avaScript是單線程執(zhí)行的，也就是說(shuō)如果不清除間歇調(diào)用，代碼隊(duì)列中的其他的代碼即使進(jìn)入了代碼也是無(wú)法執(zhí)行的。事實(shí)上，間歇調(diào)用導(dǎo)致的問(wèn)題不止如此。

    var timeId = setInterval(function(){
        alert("hello world");    
    }, 5000);
    clearInterval(timeId);

一般沒(méi)有必要跟蹤超時(shí)調(diào)用的ID，因?yàn)閳?zhí)行一次之后就自動(dòng)清除了；但是間歇調(diào)用最好人工清除，或者采用超時(shí)調(diào)用模擬間歇調(diào)用，這還有另外一個(gè)好處。

JavaScript的時(shí)間線及間歇調(diào)用的困擾

JavaScript是單線程執(zhí)行的，不同時(shí)期由不同的代碼控制JavaScript時(shí)間線，由瀏覽器從代碼隊(duì)列中選擇特定的代碼執(zhí)行。定時(shí)器中設(shè)置的時(shí)間實(shí)際上是指定時(shí)器代碼進(jìn)入代碼隊(duì)列的時(shí)間，實(shí)際開(kāi)始運(yùn)行時(shí)間取決于JavaScript進(jìn)程是否空閑，如果不空閑就要等待正在執(zhí)行的代碼完成執(zhí)行。

var btn = document.getElementById(“my-btn”);
btn.onclick = function(){
setTimeout(function(){
        document.getElementById(“message”).style.visibility = “visible”;
    }, 250);
};

上圖設(shè)置了一個(gè)250ms后的timer，但是由于onclick事件處理程序要執(zhí)行300ms，即使到了255ms，timer也是不執(zhí)行的，直到onclick執(zhí)行完才能執(zhí)行。

JavaScript的這種單線程執(zhí)行方式導(dǎo)致了瀏覽器添加間歇定時(shí)器代碼時(shí)，僅能等待隊(duì)列中沒(méi)有該定時(shí)器的代碼實(shí)例時(shí)才能加進(jìn)去，否則加不進(jìn)去。也就是說(shuō)，代碼隊(duì)列中僅能有一個(gè)間歇定時(shí)器在等待。這導(dǎo)致兩個(gè)問(wèn)題，一是某些間隔會(huì)跳過(guò)，二是多個(gè)定時(shí)器的代碼之間的間隔可能比預(yù)期的小。

上圖表明，205ms加入的定時(shí)器在300ms開(kāi)始執(zhí)行，由于定時(shí)器執(zhí)行時(shí)間超過(guò)一個(gè)時(shí)間間隔（200ms），在405ms第二個(gè)定時(shí)器進(jìn)入隊(duì)列，但是605ms時(shí)的代碼卻難以進(jìn)入隊(duì)列了，這是因?yàn)?05ms進(jìn)入的代碼還在隊(duì)列中。
為了避免重復(fù)定時(shí)器的缺點(diǎn)，常使用超時(shí)定時(shí)器模擬間歇定時(shí)器，如下：

setTimeout(function(){
//processing
setTimeout(arguments.callee, interval);
}, interval);
具體的使用實(shí)例如下：

  
  
  
  
    the onlt one div

定時(shí)器的使用：數(shù)組分塊（array chunking）和函數(shù)節(jié)流（function throttling）

數(shù)組分塊的原因：JavaScript的功能是被限制的，無(wú)法像桌面應(yīng)用一樣無(wú)限制的占有資源。其中一個(gè)限制就是執(zhí)行時(shí)間的限制，如果代碼執(zhí)行超過(guò)特定的時(shí)間或者特定的語(yǔ)句數(shù)目就禁止繼續(xù)執(zhí)行。因此，在處理大規(guī)模數(shù)組時(shí)，可以使用定時(shí)器將數(shù)組分為多個(gè)塊間斷執(zhí)行，JavaScript進(jìn)程有時(shí)間在處理數(shù)組項(xiàng)目的事件之間轉(zhuǎn)入空閑，這樣整個(gè)數(shù)組項(xiàng)目項(xiàng)目的處理就不會(huì)受執(zhí)行時(shí)間限制。實(shí)現(xiàn)數(shù)組分組的函數(shù)如下：

    the onlt one div

函數(shù)節(jié)流的原因：瀏覽器中某些計(jì)算很耗費(fèi)資源，包括CPU和內(nèi)存，例如resize操作，因此如果循環(huán)執(zhí)行這些操作會(huì)使瀏覽器崩潰。函數(shù)節(jié)流的原理類似于數(shù)組分塊，也就是某一個(gè)執(zhí)行代碼用定時(shí)器分位數(shù)塊執(zhí)行。不詳細(xì)介紹。