9.26-9.30
第8章 馴服線程和定時器
定時器可以在js中使用，但它不是js的一項功能拙泽，如果我們在非瀏覽器環(huán)境中使用js戒突，很可能定時器就不存在了椭岩，需要自己實現(xiàn)自己的定時器版本贼涩。
定時器提供了一種讓一段代碼在一定毫秒之后巧涧，再異步執(zhí)行的能力。由于js是單線程的特性（同一時間只能執(zhí)行一處js代碼）遥倦，定時器提出了一種跳出這種限制的方法褒侧，以一種不太直觀的方式來執(zhí)行代碼。
8.1 定時器和線程是如何工作的
8.1.1 設(shè)置和清除定時器
js提供了兩種方式谊迄，用于創(chuàng)建定時器以及兩個相應(yīng)的清除方法（刪除）。這些方法是window對象（全局上下文）上的方法烟央。
id = setTimeout(fn,delay) 啟動一個定時器统诺，在一段時間(delay)之后執(zhí)行傳入的callback，并返回該定時器的唯一標識
clearTimeout(id) 如果定時器還未觸發(fā)疑俭，傳入定時器標識即可取消（清除）該定時器
id = setInterval(fn,delay) 啟動一個定時器粮呢，在每隔一段時間之后都執(zhí)行傳入的callback，并返回該定時器的唯一標識
clearInterval(id) 傳入間隔定時器標識，即可取消該間隔定時器
js定時器的延遲時間是不能保證的啄寡，原因和js線程的本質(zhì)有很大關(guān)系豪硅。
8.1.2 執(zhí)行線程中的定時器執(zhí)行
在Web worker可用之前，瀏覽器中的所有js代碼都是在單線程中執(zhí)行的挺物，是的懒浮，只有一個線程。
處理程序在執(zhí)行時必須進行排隊執(zhí)行识藤，并且一個處理程序并不能中斷另外一個處理程序的執(zhí)行砚著。
8.1.3 timeout與interval之間的區(qū)別
示例8.1 兩種創(chuàng)建重復(fù)定時器的方式
setTimeout(function?repeatMe(){ ?//定義一個timeout定時器，每10毫秒都重新調(diào)用自己
//code
setTimeout(repeatMe,10)
},10)
setInterval(function(){ ?//定義一個interval定時器痴昧，每10毫秒都觸發(fā)一次
//code
},10)
在setTimeout()代碼中稽穆，要在前一個callback回調(diào)執(zhí)行結(jié)束并延遲10秒以后，才能再次執(zhí)行setTimeout()赶撰。
而setInterval()則是每隔10毫秒就嘗試執(zhí)行callback回調(diào)舌镶，而不關(guān)注上一個callback是何時執(zhí)行的。
.js引擎是單線程執(zhí)行豪娜，異步事件必須要排隊等待才能執(zhí)行
.如果無法立即執(zhí)行定時器餐胀，該定時器會被推遲到下一個可用的執(zhí)行時間點上（可能更長，但不會比指定的延遲時間更少）侵歇。
.如果一直被延遲骂澄，到最后，interval間隔定時器可能會無延遲執(zhí)行惕虑，并且同一個interval處理程序的多個實例不能同時進行排隊坟冲。
.setTimeout()和setInterval()在觸發(fā)同期的定義上是完全不同的。
8.2 定時器延遲的最小化及其可靠性
現(xiàn)代瀏覽器通常無法實現(xiàn)1毫秒粒度的可持續(xù)間隔溃蔫，某些瀏覽器的實現(xiàn)可以非常接近健提。
當我們對setInterval()設(shè)置0毫秒的延遲時，ie瀏覽器定時器的callback回調(diào)只會執(zhí)行一次伟叛，和使用setTimeout效果一樣私痹。
瀏覽器不保證我們指定的延遲間隔，雖然可以指定特定的延遲值统刮，但其準確性卻并不總是能夠保證紊遵，尤其是在延遲值很小的時候。
8.3 處理昂貴的計算過程
js的單線程本質(zhì)可能是js復(fù)雜應(yīng)用程序開發(fā)中的最大“陷阱”侥蒙。在js執(zhí)行的時候暗膜，頁面渲染的所有更新操作都要暫停。
如果要保持界面有良好的響應(yīng)能力鞭衩，減少運行時間超過幾百毫秒的復(fù)雜操作学搜，將其控制在可管理狀態(tài)是非常必要的娃善。
如果一段腳本的運行時間超過5秒，有些瀏覽器將彈出一個對話框警告用戶該腳本“無法響應(yīng)”瑞佩。iPhone上的瀏覽器聚磺，將默認終止運行時間超過5秒鐘的腳本。
作為定時器炬丸，它在一段時間之后瘫寝，可以有效暫停一段js代碼的執(zhí)行，定時器還可以將代碼的各個部分御雕，分解成不會讓瀏覽器掛掉的碎片矢沿。
考慮到這一點，我們可以將強循環(huán)和操作轉(zhuǎn)化為非阻塞操作酸纲。
示例8.2 一個長時間運行的任務(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個DOM節(jié)點捣鲸，并使用大量的單元格來填充一個表格。這是非常昂貴的操作闽坡，明顯會增加瀏覽器的執(zhí)行時間栽惶，從而阻止正常的用戶交互操作。
我們可以引入定時器疾嗅，在代碼執(zhí)行的時候定期暫停休息
示例8.3 利用定時器分解長時間運行的任務(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);
上例將操作分成四步小操作外厂，每個操作創(chuàng)建自己的DOM節(jié)點。這些較小的操作代承，則不太可能讓瀏覽器掛掉汁蝶。
8.4 中央定時器控制
使用定時器可能出現(xiàn)的問題是對大批量定時器的管理。
同時創(chuàng)建大量的定時器论悴，將會在瀏覽器中增加垃圾回收任務(wù)的可能性掖棉。垃圾回收就是瀏覽器遍歷其分配過的內(nèi)存，并試圖刪除沒有任何應(yīng)用的未使用對象的過程膀估。定時器是一個特殊的問題幔亥，因為通常它們是在js單線程引擎之外的流程中進行管理。有些瀏覽器可以很好地處理這種情況察纯，有些瀏覽器的垃圾回收周期則很長帕棉。一個動畫在某個瀏覽器中很漂亮、很流暢饼记，但在另外一個瀏覽器中卻很卡頓香伴。
在多個定時器中使用中央定時器控制，可以帶來很大的威力和靈活性具则。
.每個頁面在同一時間只需要運行一個定時器瞒窒。
.可以根據(jù)需要暫停和恢復(fù)定時器。
.刪除回調(diào)函數(shù)的過程變得很簡單乡洼。
示例8.4 管理多個處理程序的中央定時器控制
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();
一開始崇裁，所有的回調(diào)函數(shù)都存儲于一個名為timers的數(shù)組中，還包含當前定時器的一個ID束昵，這些變量是定時器唯一需要維護的內(nèi)容拔稳。
add()方法接受一個callback回調(diào)，并簡單將其添加到timers數(shù)組中锹雏。
start()方法首先確認沒有定時器在運行（通過檢查timerID是否有值）巴比，如果確認沒有定時器在執(zhí)行，立即執(zhí)行一個即時函數(shù)來開啟中央定時器礁遵。
在即時函數(shù)內(nèi)轻绞，如果注冊了處理程序，就遍歷執(zhí)行每個處理程序佣耐。如果有處理程序返回false政勃，我們就從數(shù)組中將其刪除，最后進行下一次調(diào)度兼砖。
以這種方式組織定時器奸远，可以確保回調(diào)函數(shù)總是按照添加的順序進行執(zhí)行讽挟。而普通的定時器通常不會保證這種順序懒叛，有可能后面的一個處理程序在前面就執(zhí)行了。
這種方式的定時器組織耽梅，對于大型應(yīng)用程序或任何形式的js動畫來說都是至關(guān)重要的薛窥。
8.5 異步測試
示例：簡單的異步測試套件
(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()方法的每個函數(shù)眼姐，最多只包含一個異步測試诅迷。它們的異步性由pause()和resume()的使用所定義，這兩個方法分別在異步事件之前或之后進行調(diào)用妥凳。這段代碼是一種確保讓包含異步行為的函數(shù)竟贯，以特定的順序進行執(zhí)行的方式。
該隊列唯一的目的是在等待執(zhí)行的時候逝钥，出列一個函數(shù)并進行執(zhí)行屑那。否則，就完全停止運行一個時間間隔艘款。
這段代碼持际，強制測試套件以純粹異步方式進行執(zhí)行，但同時又保證了測試執(zhí)行的順序哗咆。
