本文實(shí)例講述了JavaScript高級(jí)定時(shí)器原理與用法。分享給大家供大家參考，具體如下：

setTimeout()和setInterval()可以用來(lái)創(chuàng)建定時(shí)器，其基本的用法這里就不再做介紹了。這里主要介紹一下javascript的代碼隊(duì)列。在javascript中沒有任何代碼是立即執(zhí)行的，一旦進(jìn)程空閑則盡快執(zhí)行。所以說(shuō)定時(shí)器中設(shè)置的時(shí)間并不代表執(zhí)行時(shí)間就一定相符，而是代表代碼會(huì)在指定時(shí)間間隔后加入到隊(duì)列中進(jìn)行等待。如果在這個(gè)時(shí)間點(diǎn)上，隊(duì)列中沒有其他東西，那么這段代碼就會(huì)被執(zhí)行，表面上看上去好像代碼就在精確指定的時(shí)間點(diǎn)上執(zhí)行了。所以就會(huì)產(chǎn)生一些問題。

重復(fù)定時(shí)器

通常，我們使用setInterval方法來(lái)以相同時(shí)間間隔重復(fù)執(zhí)行某段代碼。但是使用該方法會(huì)有兩個(gè)問題：第一個(gè)就是某些間隔會(huì)被跳過(guò)；第二個(gè)就是多個(gè)定時(shí)器的代碼執(zhí)行之間的間隔可能會(huì)比預(yù)期的小。

在這里，我們來(lái)舉個(gè)例子：如果某個(gè)onclick事件處理程序使用setInterval設(shè)置了一個(gè)200ms間隔的重復(fù)定時(shí)器，如果事件處理程序花了300ms的時(shí)間完成，就會(huì)跳過(guò)一個(gè)時(shí)間間隔同時(shí)運(yùn)行著一個(gè)定時(shí)器代碼。

我們也可以通過(guò)下面的代碼來(lái)得到結(jié)論：

//重復(fù)定時(shí)器
var i =0;
setInterval(function(){
 //如果事件處理時(shí)間長(zhǎng)于間隔時(shí)間
 i++;
 for(var j=0;j<100000000;j++){}
 document.write(i+' ');
},100);
//可以明顯感覺到時(shí)間間隔不相等

為了避免這種時(shí)間間隔的問題，我們可以采用鏈?zhǔn)秸{(diào)用setTimeout方法來(lái)取代setInterval。

//可以采用鏈?zhǔn)秸{(diào)用setTimeout來(lái)取代setInterval
var i = 0;
setTimeout(function(){
 //處理內(nèi)容
 i++;
 for(var j=0;j<100000000;j++){}
 document.write(i+' ');
 //
 setTimeout(arguments.callee,100);
},100);
//這樣處理效果明顯好多了。

每次函數(shù)執(zhí)行的時(shí)候都會(huì)創(chuàng)建一個(gè)新的定時(shí)器，第二個(gè)setTimeout調(diào)用使用了arguments.callee來(lái)獲取對(duì)當(dāng)前執(zhí)行的函數(shù)的引用，并為其設(shè)置另外一個(gè)定時(shí)器。這樣做是為了在前一個(gè)定時(shí)器代碼執(zhí)行完之前，不會(huì)向隊(duì)列插入新的定時(shí)器代碼，確保不會(huì)有任何缺失的間隔，也保證了在下一次定時(shí)器代碼執(zhí)行之前，至少要等待指定的間隔，避免了連續(xù)的運(yùn)行?？芍^一舉兩得，現(xiàn)在主流框架中的動(dòng)畫一般都是這樣來(lái)實(shí)現(xiàn)重復(fù)定時(shí)的。

函數(shù)節(jié)流

定時(shí)器不僅僅是用來(lái)定時(shí)的，也可以用來(lái)緩解瀏覽器的壓力。瀏覽器中某些計(jì)算和處理要比其他的昂貴很多，比如說(shuō)DOM操作，就會(huì)需要更多的內(nèi)存和CPU時(shí)間，連續(xù)使用過(guò)多的DOM操作可能會(huì)導(dǎo)致瀏覽器掛起，甚至崩潰。

函數(shù)節(jié)流的基本思想就是，某些代碼不可以在沒有間斷的情況連續(xù)重復(fù)執(zhí)行。第一次調(diào)用函數(shù)，創(chuàng)建一個(gè)定時(shí)器，在指定的時(shí)間間隔之后運(yùn)行代碼。當(dāng)?shù)诙握{(diào)用該函數(shù)時(shí)，它會(huì)清除前一次的定時(shí)器并設(shè)置一個(gè)。目的就是為了在執(zhí)行函數(shù)的請(qǐng)求停止一段時(shí)間后再執(zhí)行。

代碼如下:

//再來(lái)談?wù)労瘮?shù)節(jié)流
function throttle(method,context){
 clearTimeout(method.tId);
 method.tId = setTimeout(function(){
 method.call(context);
 },100);
}
//該函數(shù)接受兩個(gè)參數(shù)，第一個(gè)是要執(zhí)行的函數(shù)，第二個(gè)是作用域。
//使用方法demo
//未使用情況：
window.onresize = function(){
 var div = document.getElementByTagName(body);
 div.style.height = div.offsetWidth +'px';
}
//使用情況;
function resizeDiv(){
 var div = document.getElementByTagName(body);
 div.style.height = div.offsetWidth +'px';
}
window.onresize = function(){
 throttle(resizeDiv);
};
//只要代碼是周期性執(zhí)行的，都應(yīng)該使用節(jié)流。

這樣給用戶的感覺并不會(huì)很大，確是給瀏覽器減少了不少的壓力。函數(shù)節(jié)流也是很多框架常用的技巧之一。

demo示例：

//重復(fù)定時(shí)器
/*var i =0;
setInterval(function(){
 //如果事件處理時(shí)間長(zhǎng)于間隔時(shí)間
 i++;
 for(var j=0;j<100000000;j++){}
 document.write(i+' ');
},100);*/
//可以明顯感覺到時(shí)間間隔不相等
//可以采用鏈?zhǔn)秸{(diào)用setTimeout來(lái)取代setInterval
/*var i = 0;
setTimeout(function(){
 //處理內(nèi)容
 i++;
 for(var j=0;j<100000000;j++){}
 document.write(i+' ');
 //
 setTimeout(arguments.callee,100);
},100);*/
//這樣處理效果明顯好多了。
//以上就是重復(fù)定時(shí)器
//再來(lái)談?wù)労瘮?shù)節(jié)流
function throttle(method,context){
 clearTimeout(method.tId);
 method.tId = setTimeout(function(){
 method.call(context);
 },100);
}
//該函數(shù)接受兩個(gè)參數(shù)，第一個(gè)是要執(zhí)行的函數(shù)，第二個(gè)是作用域。
//使用方法demo
//未使用情況：
window.onresize = function(){
 var div = document.getElementByTagName(body);
 div.style.height = div.offsetWidth +'px';
}
//使用情況;
function resizeDiv(){
 var div = document.getElementByTagName(body);
 div.style.height = div.offsetWidth +'px';
}
window.onresize = function(){
 throttle(resizeDiv);
};
//只要代碼是周期性執(zhí)行的，都應(yīng)該使用節(jié)流。

更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《JavaScript時(shí)間與日期操作技巧總結(jié)》、《JavaScript查找算法技巧總結(jié)》、《JavaScript錯(cuò)誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript數(shù)學(xué)運(yùn)算用法總結(jié)》

希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。

最新評(píng)論