這篇文章給大家介紹JavaScript中高級定時器的原理是什么，內容非常詳細，感興趣的小伙伴們可以參考借鑒，希望對大家能有所幫助。

網站建設、網站設計的開發(fā)，更需要了解用戶，從用戶角度來建設網站，獲得較好的用戶體驗。創(chuàng)新互聯建站多年互聯網經驗，見的多，溝通容易、能幫助客戶提出的運營建議。作為成都一家網絡公司，打造的就是網站建設產品直銷的概念。選擇創(chuàng)新互聯建站，不只是建站，我們把建站作為產品，不斷的更新、完善，讓每位來訪用戶感受到浩方產品的價值服務。

JavaScript的作用是什么

1、能夠嵌入動態(tài)文本于HTML頁面。2、對瀏覽器事件做出響應。3、讀寫HTML元素。4、在數據被提交到服務器之前驗證數據。5、檢測訪客的瀏覽器信息。6、控制cookies，包括創(chuàng)建和修改等。7、基于Node.js技術進行服務器端編程。

重復定時器

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

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

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

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

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

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

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

函數節(jié)流

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

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

代碼如下:

//再來談談函數節(jié)流
function throttle(method,context){
 clearTimeout(method.tId);
 method.tId = setTimeout(function(){
 method.call(context);
 },100);
}
//該函數接受兩個參數，第一個是要執(zhí)行的函數，第二個是作用域。
//使用方法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í)行的，都應該使用節(jié)流。

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

demo示例：

//重復定時器
/*var i =0;
setInterval(function(){
 //如果事件處理時間長于間隔時間
 i++;
 for(var j=0;j<100000000;j++){}
 document.write(i+' ');
},100);*/
//可以明顯感覺到時間間隔不相等
//可以采用鏈式調用setTimeout來取代setInterval
/*var i = 0;
setTimeout(function(){
 //處理內容
 i++;
 for(var j=0;j<100000000;j++){}
 document.write(i+' ');
 //
 setTimeout(arguments.callee,100);
},100);*/
//這樣處理效果明顯好多了。
//以上就是重復定時器
//再來談談函數節(jié)流
function throttle(method,context){
 clearTimeout(method.tId);
 method.tId = setTimeout(function(){
 method.call(context);
 },100);
}
//該函數接受兩個參數，第一個是要執(zhí)行的函數，第二個是作用域。
//使用方法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í)行的，都應該使用節(jié)流。

關于JavaScript中高級定時器的原理是什么就分享到這里了，希望以上內容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。

網站欄目：JavaScript中高級定時器的原理是什么
當前URL：http://jinyejixie.com/article10/ipiigo.html

成都網站建設公司_創(chuàng)新互聯，為您提供網站營銷、域名注冊、移動網站建設、品牌網站建設、手機網站建設、網站策劃

廣告

聲明：本網站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯