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

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

重復(fù)定時器

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

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

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

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

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

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

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

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

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

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