9.26-9.30
第8章 馴服線程和定時(shí)器
定時(shí)器可以在js中使用，但它不是js的一項(xiàng)功能，如果我們?cè)诜菫g覽器環(huán)境中使用js，很可能定時(shí)器就不存在了，需要自己實(shí)現(xiàn)自己的定時(shí)器版本。
定時(shí)器提供了一種讓一段代碼在一定毫秒之后，再異步執(zhí)行的能力。由于js是單線程的特性（同一時(shí)間只能執(zhí)行一處js代碼），定時(shí)器提出了一種跳出這種限制的方法，以一種不太直觀的方式來(lái)執(zhí)行代碼。
8.1 定時(shí)器和線程是如何工作的
8.1.1 設(shè)置和清除定時(shí)器
js提供了兩種方式，用于創(chuàng)建定時(shí)器以及兩個(gè)相應(yīng)的清除方法（刪除）。這些方法是window對(duì)象（全局上下文）上的方法。
id = setTimeout(fn,delay) 啟動(dòng)一個(gè)定時(shí)器，在一段時(shí)間(delay)之后執(zhí)行傳入的callback，并返回該定時(shí)器的唯一標(biāo)識(shí)
clearTimeout(id) 如果定時(shí)器還未觸發(fā)，傳入定時(shí)器標(biāo)識(shí)即可取消（清除）該定時(shí)器
id = setInterval(fn,delay) 啟動(dòng)一個(gè)定時(shí)器，在每隔一段時(shí)間之后都執(zhí)行傳入的callback，并返回該定時(shí)器的唯一標(biāo)識(shí)
clearInterval(id) 傳入間隔定時(shí)器標(biāo)識(shí)，即可取消該間隔定時(shí)器
js定時(shí)器的延遲時(shí)間是不能保證的，原因和js線程的本質(zhì)有很大關(guān)系。
8.1.2 執(zhí)行線程中的定時(shí)器執(zhí)行
在Web worker可用之前，瀏覽器中的所有js代碼都是在單線程中執(zhí)行的，是的，只有一個(gè)線程。
處理程序在執(zhí)行時(shí)必須進(jìn)行排隊(duì)執(zhí)行，并且一個(gè)處理程序并不能中斷另外一個(gè)處理程序的執(zhí)行。
8.1.3 timeout與interval之間的區(qū)別
示例8.1 兩種創(chuàng)建重復(fù)定時(shí)器的方式
setTimeout(function?repeatMe(){ ?//定義一個(gè)timeout定時(shí)器，每10毫秒都重新調(diào)用自己
//code
setTimeout(repeatMe,10)
},10)
setInterval(function(){ ?//定義一個(gè)interval定時(shí)器，每10毫秒都觸發(fā)一次
//code
},10)
在setTimeout()代碼中，要在前一個(gè)callback回調(diào)執(zhí)行結(jié)束并延遲10秒以后，才能再次執(zhí)行setTimeout()。
而setInterval()則是每隔10毫秒就嘗試執(zhí)行callback回調(diào)，而不關(guān)注上一個(gè)callback是何時(shí)執(zhí)行的。
.js引擎是單線程執(zhí)行，異步事件必須要排隊(duì)等待才能執(zhí)行
.如果無(wú)法立即執(zhí)行定時(shí)器，該定時(shí)器會(huì)被推遲到下一個(gè)可用的執(zhí)行時(shí)間點(diǎn)上（可能更長(zhǎng)，但不會(huì)比指定的延遲時(shí)間更少）。
.如果一直被延遲，到最后，interval間隔定時(shí)器可能會(huì)無(wú)延遲執(zhí)行，并且同一個(gè)interval處理程序的多個(gè)實(shí)例不能同時(shí)進(jìn)行排隊(duì)。
.setTimeout()和setInterval()在觸發(fā)同期的定義上是完全不同的。
8.2 定時(shí)器延遲的最小化及其可靠性
現(xiàn)代瀏覽器通常無(wú)法實(shí)現(xiàn)1毫秒粒度的可持續(xù)間隔，某些瀏覽器的實(shí)現(xiàn)可以非常接近。
當(dāng)我們對(duì)setInterval()設(shè)置0毫秒的延遲時(shí)，ie瀏覽器定時(shí)器的callback回調(diào)只會(huì)執(zhí)行一次，和使用setTimeout效果一樣。
瀏覽器不保證我們指定的延遲間隔，雖然可以指定特定的延遲值，但其準(zhǔn)確性卻并不總是能夠保證，尤其是在延遲值很小的時(shí)候。
8.3 處理昂貴的計(jì)算過(guò)程
js的單線程本質(zhì)可能是js復(fù)雜應(yīng)用程序開(kāi)發(fā)中的最大“陷阱”。在js執(zhí)行的時(shí)候，頁(yè)面渲染的所有更新操作都要暫停。
如果要保持界面有良好的響應(yīng)能力，減少運(yùn)行時(shí)間超過(guò)幾百毫秒的復(fù)雜操作，將其控制在可管理狀態(tài)是非常必要的。
如果一段腳本的運(yùn)行時(shí)間超過(guò)5秒，有些瀏覽器將彈出一個(gè)對(duì)話框警告用戶該腳本“無(wú)法響應(yīng)”。iPhone上的瀏覽器，將默認(rèn)終止運(yùn)行時(shí)間超過(guò)5秒鐘的腳本。
作為定時(shí)器，它在一段時(shí)間之后，可以有效暫停一段js代碼的執(zhí)行，定時(shí)器還可以將代碼的各個(gè)部分，分解成不會(huì)讓瀏覽器掛掉的碎片。
考慮到這一點(diǎn)，我們可以將強(qiáng)循環(huán)和操作轉(zhuǎn)化為非阻塞操作。
示例8.2 一個(gè)長(zhǎng)時(shí)間運(yùn)行的任務(wù)
var?tbody?=?document.getElementsByTagName('tbody')[0];
for(var?i=0;?i<20000;?i++){
var?tr?=?document.createElement('tr');
for(var?t=0;?t<6;?t++){
var?td?=?document.createElement('td');
td.appendChild(document.createTextNode(i+','+t));
tr.appendChild(td);
}
tbody.appendChild(tr)
}
上例創(chuàng)建了240000個(gè)DOM節(jié)點(diǎn)，并使用大量的單元格來(lái)填充一個(gè)表格。這是非常昂貴的操作，明顯會(huì)增加瀏覽器的執(zhí)行時(shí)間，從而阻止正常的用戶交互操作。
我們可以引入定時(shí)器，在代碼執(zhí)行的時(shí)候定期暫停休息
示例8.3 利用定時(shí)器分解長(zhǎng)時(shí)間運(yùn)行的任務(wù)
var?tbody?=?document.getElementsByTagName('tbody')[0];
var?rowCount?=?20000;
var?divideInto?=?4;
var?chunkSize?=?rowCount/divideInto;
var?iteration?=?0;
setTimeout(function?generateRows(){
var?base?=?(chunkSize)*iteration;
for(var?i=0;?i
var?tr?=?document.createElement('tr');
for(var?t=0;?t<6;?t++){
var?td?=?document.createElement('td');
td.appendChild(document.createTextNode((i+base)+','+t+','+iteration));
tr.appendChild(td)
}
tbody.appendChild(tr);
}
iteration++;
if(iteration
setTimeout(generateRows,0)
}
},0);
上例將操作分成四步小操作，每個(gè)操作創(chuàng)建自己的DOM節(jié)點(diǎn)。這些較小的操作，則不太可能讓瀏覽器掛掉。
8.4 中央定時(shí)器控制
使用定時(shí)器可能出現(xiàn)的問(wèn)題是對(duì)大批量定時(shí)器的管理。
同時(shí)創(chuàng)建大量的定時(shí)器，將會(huì)在瀏覽器中增加垃圾回收任務(wù)的可能性。垃圾回收就是瀏覽器遍歷其分配過(guò)的內(nèi)存，并試圖刪除沒(méi)有任何應(yīng)用的未使用對(duì)象的過(guò)程。定時(shí)器是一個(gè)特殊的問(wèn)題，因?yàn)橥ǔＫ鼈兪窃趈s單線程引擎之外的流程中進(jìn)行管理。有些瀏覽器可以很好地處理這種情況，有些瀏覽器的垃圾回收周期則很長(zhǎng)。一個(gè)動(dòng)畫(huà)在某個(gè)瀏覽器中很漂亮、很流暢，但在另外一個(gè)瀏覽器中卻很卡頓。
在多個(gè)定時(shí)器中使用中央定時(shí)器控制，可以帶來(lái)很大的威力和靈活性。
.每個(gè)頁(yè)面在同一時(shí)間只需要運(yùn)行一個(gè)定時(shí)器。
.可以根據(jù)需要暫停和恢復(fù)定時(shí)器。
.刪除回調(diào)函數(shù)的過(guò)程變得很簡(jiǎn)單。
示例8.4 管理多個(gè)處理程序的中央定時(shí)器控制
test?suite
#box{position:absolute;width:60px;height:40px;border:1px?solid?#060;?text-align:center;}
Hello!
var?timers={
timerID:0,
timers:[],
add:function(fn){
this.timers.push(fn);
},
start:function?runNext(){
if(this.timerID)?return;
(function(){
if(timers.timers.length?>?0){
for(var?i=0;?i
if(timers.timers[i]()?===?false){
timers.timers.splice(i,1);
i--
}
}
timers.timerID?=?setTimeout(runNext,0)
}
})()
},
stop:function(){
clearTimeout(this.timerID);
this.timerID=0;
}
}
var?box?=?document.getElementById('box'),x=0,y=20;
timers.add(function(){
box.style.left?=?x?+?'px';
if(++x>50)?return?false;
})
timers.add(function(){
box.style.top?=?y+'px';
y+=2;
if(y>120)?return?false;
})
timers.start();
一開(kāi)始，所有的回調(diào)函數(shù)都存儲(chǔ)于一個(gè)名為timers的數(shù)組中，還包含當(dāng)前定時(shí)器的一個(gè)ID，這些變量是定時(shí)器唯一需要維護(hù)的內(nèi)容。
add()方法接受一個(gè)callback回調(diào)，并簡(jiǎn)單將其添加到timers數(shù)組中。
start()方法首先確認(rèn)沒(méi)有定時(shí)器在運(yùn)行（通過(guò)檢查timerID是否有值），如果確認(rèn)沒(méi)有定時(shí)器在執(zhí)行，立即執(zhí)行一個(gè)即時(shí)函數(shù)來(lái)開(kāi)啟中央定時(shí)器。
在即時(shí)函數(shù)內(nèi)，如果注冊(cè)了處理程序，就遍歷執(zhí)行每個(gè)處理程序。如果有處理程序返回false，我們就從數(shù)組中將其刪除，最后進(jìn)行下一次調(diào)度。
以這種方式組織定時(shí)器，可以確保回調(diào)函數(shù)總是按照添加的順序進(jìn)行執(zhí)行。而普通的定時(shí)器通常不會(huì)保證這種順序，有可能后面的一個(gè)處理程序在前面就執(zhí)行了。
這種方式的定時(shí)器組織，對(duì)于大型應(yīng)用程序或任何形式的js動(dòng)畫(huà)來(lái)說(shuō)都是至關(guān)重要的。
8.5 異步測(cè)試
示例：簡(jiǎn)單的異步測(cè)試套件
(function(){
var?queue?=?[],paused=false;
this.test?=?function(fn){
queue.push(fn);
runTest();
}
this.pause?=?function(){
paused?=?true;
}
this.resume?=?function(){
paused?=?false;
setTimeout(runTest,1)
}
function?runTest(){
if(!paused?&&?queue.length){
queue.shift();
if(!paused)?resume();
}
}
})()
示例中，傳遞給test()方法的每個(gè)函數(shù)，最多只包含一個(gè)異步測(cè)試。它們的異步性由pause()和resume()的使用所定義，這兩個(gè)方法分別在異步事件之前或之后進(jìn)行調(diào)用。這段代碼是一種確保讓包含異步行為的函數(shù)，以特定的順序進(jìn)行執(zhí)行的方式。
該隊(duì)列唯一的目的是在等待執(zhí)行的時(shí)候，出列一個(gè)函數(shù)并進(jìn)行執(zhí)行。否則，就完全停止運(yùn)行一個(gè)時(shí)間間隔。
這段代碼，強(qiáng)制測(cè)試套件以純粹異步方式進(jìn)行執(zhí)行，但同時(shí)又保證了測(cè)試執(zhí)行的順序。
