一只锻、作用
-
數(shù)組分塊
數(shù)組分塊是一種使用定時器分割循環(huán)的技術(shù)谈竿，為要處理的項目創(chuàng)建一個隊列，然后使用定時器取出下一個要處理的項目進行處理构订，接著再設(shè)置另一個定時器。
function chunk(array,process,context){
setTimeout(function(){
//取出下一個條目并處理
var item = array.shift();
process.call(context,item);
//若還有條目避矢，再設(shè)置另一個定時器
if(array.length > 0){
setTimeout(arguments.callee,100);
}
},100);
}var data = [1,2,3,4,5,6,7,8,9,0]; function printValue(item){ var div = document.getElementById('myDiv'); div.innerHTML += item + '<br>'; } chunk(data,printValue);數(shù)組分塊的重要性在于它可以將多個項目的處理在執(zhí)行隊列上分開悼瘾，在每個項目處理之后囊榜，給予其他的瀏覽器處理機會運行，這樣就可能避免長時間運行腳本的錯誤.
<b>一旦某個函數(shù)需要花50ms以上的時間完成亥宿，那么最好看看能否將任務(wù)分割為一系列可以使用定時器的小任務(wù).</b> 函數(shù)節(jié)流
連續(xù)嘗試進行過多的DOM相關(guān)操作可能會導(dǎo)致瀏覽器掛起卸勺，有時候甚至?xí)罎ⅰ?br> <b>解決辦法:</b>函數(shù)節(jié)流背后的基本思想是指，某些代碼不可以在沒有間斷的情況連續(xù)重復(fù)執(zhí)行烫扼。第一次調(diào)用函數(shù)曙求，創(chuàng)建一個定時器，在指定的時間間隔之后運行代碼映企。當(dāng)?shù)诙握{(diào)用該函數(shù)時圆到，它會清除前一次的定時器并設(shè)置另一個。
var processor = {
timeoutId: null,
//實際進行處理的方法
performProcessing: function(){
//實際執(zhí)行的方法
},
//初始處理調(diào)用的方法
process: function(){
clearTimeout(this.timeoutId);
var that = this;
this.timeoutId = setTimeout(function(){
that.performProcessing();
},100);
}
}
processor.process();
二卑吭、應(yīng)用
- 使用定時器來調(diào)整事件發(fā)生順序
網(wǎng)頁開發(fā)中芽淡，某個事件先發(fā)生在子元素，然后冒泡到父元素豆赏，即子元素的事件回調(diào)函數(shù)挣菲，會早于父元素的事件回調(diào)函數(shù)觸發(fā)。如果掷邦，我們先讓父元素的事件回調(diào)函數(shù)先發(fā)生白胀，就要用到setTimeout(f, 0)。例如：
div.onclick = function(){
setTimeout(function(){
alert(0);
})
}
document.onclick = function(){
alert(1);
} //先執(zhí)行1 后 0了 - 用戶自定義的回調(diào)函數(shù)抚岗，通常在瀏覽器的默認動作之前觸發(fā)或杠。比如，用戶在輸入框輸入文本宣蔚，keypress事件會在瀏覽器接收文本之前觸發(fā)向抢。因此，下面的回調(diào)函數(shù)是達不到目的.
<input type="text" id="myInput">
<script>
myInput.onkeypress = function(event) {
this.value = this.value.toUpperCase();
}
</script>
用setTimeout改寫
<input type="text" id="myInput">
<script>
myInput.onkeypress = function(event) {
setTimeout(function(){
myInput.value = myInput.value.toUpperCase();
});
}
</script>
