深入理解javascript之進階定時器

深入理解javascript之進階定時器

setTimeout()和setInterval()可以用來建立定時器，其基本的用法這裡就不再做介紹了。這裡主要介紹一下javascript的代碼隊列。在javascript中沒有任何代碼是立即執行的，一旦進程空閑則儘快執行。所以說定時器中設定的時間並不代表執行時間就一定相符，而是代表代碼會在指定時間間隔後加入到隊列中進行等待。如果在這個時間點上，隊列中沒有其他東西，那麼這段代碼就會被執行，表面上看上去好像代碼就在精確指定的時間點上執行了。所以就會產生一些問題。

重複定時器

通常，我們使用setInterval方法來以相同時間間隔重複執行某段代碼。但是使用該方法會有兩個問題：第一個就是某些間隔會被跳過；第二個就是多個定時器的代碼執行之間的間隔可能會比預期的小。
在這裡，我們來舉個例子：如果某個onclick事件處理常式使用setInterval設定了一個200ms間隔的重複定時器，如果事件處理常式花了300ms的時間完成，就會跳過一個時間間隔同時運行著一個定時器代碼。
我們也可以通過下面的代碼來得到結論：

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

為了避免這種時間間隔的問題，我們可以採用鏈式調用setTimeout方法來取代setInterval。

//可以採用鏈式調用setTimeout來取代setIntervalvar i = 0;setTimeout(function(){  //處理內容  i++;  for(var j=0;j<100000000;j++){}  document.write(i+' ');  //  setTimeout(arguments.callee,100);},100);//這樣處理效果明顯好多了。

每次函數執行的時候都會建立一個新的定時器，第二個setTimeout調用使用了arguments.callee來擷取對當前執行的函數的引用，並為其設定另外一個定時器。這樣做是為了在前一個定時器代碼執行完之前，不會向隊列插入新的定時器代碼，確保不會有任何缺失的間隔，也保證了在下一次定時器代碼執行之前，至少要等待指定的間隔，避免了連續的運行。可謂一舉兩得，現在主流架構中的動畫一般都是這樣來實現重複定時的。

函數節流

定時器不僅僅是用來定時的，也可以用來緩解瀏覽器的壓力。瀏覽器中某些計算和處理要比其他的昂貴很多，比如說DOM操作，就會需要更多的記憶體和CPU時間，連續使用過多的DOM操作可能會導致瀏覽器掛起，甚至崩潰。
函數節流的基本思想就是，某些代碼不可以在沒有間斷的情況連續重複執行。第一次調用函數，建立一個定時器，在指定的時間間隔之後運行代碼。當第二次調用該函數時，它會清除前一次的定時器並設定一個。目的就是為了在執行函數的請求停止一段時間後再執行。
代碼如下:

//再來談談函數節流function throttle(method,context){  clearTimeout(method.tId);  method.tId = setTimeout(function(){    method.call(context);  },100);}//該函數接受兩個參數，第一個是要執行的函數，第二個是範圍。//使用方法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);};//只要代碼是周期性執行的，都應該使用節流。

這樣給使用者的感覺並不會很大，確是給瀏覽器減少了不少的壓力。函數節流也是很多架構常用的技巧之一。

demo位置