這篇文章給大家介紹JavaScript中高級定時器的原理是什么,內(nèi)容非常詳細(xì),感興趣的小伙伴們可以參考借鑒,希望對大家能有所幫助。
網(wǎng)站建設(shè)、網(wǎng)站設(shè)計的開發(fā),更需要了解用戶,從用戶角度來建設(shè)網(wǎng)站,獲得較好的用戶體驗。創(chuàng)新互聯(lián)建站多年互聯(lián)網(wǎng)經(jīng)驗,見的多,溝通容易、能幫助客戶提出的運營建議。作為成都一家網(wǎng)絡(luò)公司,打造的就是網(wǎng)站建設(shè)產(chǎn)品直銷的概念。選擇創(chuàng)新互聯(lián)建站,不只是建站,我們把建站作為產(chǎn)品,不斷的更新、完善,讓每位來訪用戶感受到浩方產(chǎn)品的價值服務(wù)。
1、能夠嵌入動態(tài)文本于HTML頁面。2、對瀏覽器事件做出響應(yīng)。3、讀寫HTML元素。4、在數(shù)據(jù)被提交到服務(wù)器之前驗證數(shù)據(jù)。5、檢測訪客的瀏覽器信息。6、控制cookies,包括創(chuàng)建和修改等。7、基于Node.js技術(shù)進(jìn)行服務(wù)器端編程。
重復(fù)定時器
通常,我們使用setInterval方法來以相同時間間隔重復(fù)執(zhí)行某段代碼。但是使用該方法會有兩個問題:第一個就是某些間隔會被跳過;第二個就是多個定時器的代碼執(zhí)行之間的間隔可能會比預(yù)期的小。
在這里,我們來舉個例子:如果某個onclick事件處理程序使用setInterval
設(shè)置了一個200ms間隔的重復(fù)定時器,如果事件處理程序花了300ms的時間完成,就會跳過一個時間間隔同時運行著一個定時器代碼。
我們也可以通過下面的代碼來得到結(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來取代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í)行的時候都會創(chuàng)建一個新的定時器,第二個setTimeout
調(diào)用使用了arguments.callee
來獲取對當(dāng)前執(zhí)行的函數(shù)的引用,并為其設(shè)置另外一個定時器。這樣做是為了在前一個定時器代碼執(zhí)行完之前,不會向隊列插入新的定時器代碼,確保不會有任何缺失的間隔,也保證了在下一次定時器代碼執(zhí)行之前,至少要等待指定的間隔,避免了連續(xù)的運行。可謂一舉兩得,現(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)建一個定時器,在指定的時間間隔之后運行代碼。當(dāng)?shù)诙握{(diào)用該函數(shù)時,它會清除前一次的定時器并設(shè)置一個。目的就是為了在執(zhí)行函數(shù)的請求停止一段時間后再執(zhí)行。
代碼如下:
//再來談?wù)労瘮?shù)節(jié)流 function throttle(method,context){ clearTimeout(method.tId); method.tId = setTimeout(function(){ method.call(context); },100); } //該函數(shù)接受兩個參數(shù),第一個是要執(zhí)行的函數(shù),第二個是作用域。 //使用方法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é)流。
這樣給用戶的感覺并不會很大,確是給瀏覽器減少了不少的壓力。函數(shù)節(jié)流也是很多框架常用的技巧之一。
demo示例:
//重復(fù)定時器 /*var i =0; setInterval(function(){ //如果事件處理時間長于間隔時間 i++; for(var j=0;j<100000000;j++){} document.write(i+' '); },100);*/ //可以明顯感覺到時間間隔不相等 //可以采用鏈?zhǔn)秸{(diào)用setTimeout來取代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ù)定時器 //再來談?wù)労瘮?shù)節(jié)流 function throttle(method,context){ clearTimeout(method.tId); method.tId = setTimeout(function(){ method.call(context); },100); } //該函數(shù)接受兩個參數(shù),第一個是要執(zhí)行的函數(shù),第二個是作用域。 //使用方法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中高級定時器的原理是什么就分享到這里了,希望以上內(nèi)容可以對大家有一定的幫助,可以學(xué)到更多知識。如果覺得文章不錯,可以把它分享出去讓更多的人看到。
網(wǎng)站欄目:JavaScript中高級定時器的原理是什么
當(dāng)前URL:http://muchs.cn/article10/ipiigo.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供網(wǎng)站營銷、域名注冊、移動網(wǎng)站建設(shè)、品牌網(wǎng)站建設(shè)、手機(jī)網(wǎng)站建設(shè)、網(wǎng)站策劃
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)