您好,登錄后才能下訂單哦!
今天小編給大家分享一下JavaScript防抖動與節(jié)流如何處理的相關知識點,內(nèi)容詳細,邏輯清晰,相信大部分人都還太了解這方面的知識,所以分享這篇文章給大家參考一下,希望大家閱讀完這篇文章后有所收獲,下面我們一起來了解一下吧。
針對一些會頻繁觸發(fā)的事件如scroll、resize,如果正常綁定事件處理函數(shù)的話,有可能在很短的時間內(nèi)多次連續(xù)觸發(fā)事件,十分影響性能。
因此針對這類事件要進行防抖動或者節(jié)流處理
它的做法是限制下次函數(shù)調(diào)用之前必須等待的時間間隔。正確實現(xiàn) debouncing 的方法是將若干個函數(shù)調(diào)用合成 一次,并在給定時間過去之后僅被調(diào)用一次。
// 將會包裝事件的 debounce 函數(shù) function debounce(fn, delay) { // 維護一個 timer let timer = null; return function() { // 通過 ‘this' 和 ‘a(chǎn)rguments' 獲取函數(shù)的作用域和變量 let context = this; let args = arguments; clearTimeout(timer); timer = setTimeout(function() { fn.apply(context, args); }, delay); } }
// 當用戶滾動時被調(diào)用的函數(shù) function foo() { console.log('You are scrolling!'); } // 在 debounce 中包裝我們的函數(shù),過 2 秒觸發(fā)一次 let elem = document.getElementById('container'); elem.addEventListener('scroll', debounce(foo, 2000));
首先,我們?yōu)閟croll事件綁定處理函數(shù),這時debounce函數(shù)會立即調(diào)用,因此給scroll事件綁定的函數(shù)實際上是debounce內(nèi)部返回的函數(shù)
每一次事件被觸發(fā),都會清除當前的 timer 然后重新設置超時調(diào)用。
這就會導致每一次高頻事件都會取消前一次的超時調(diào)用,導致事件處理程序不能被觸發(fā)
只有當高頻事件停止,最后一次事件觸發(fā)的超時調(diào)用才能在delay時間后執(zhí)行
更進一步,我們不希望非要等到事件停止觸發(fā)后才執(zhí)行,我希望立刻執(zhí)行函數(shù),然后等到停止觸發(fā) n 秒后,才可以重新觸發(fā)執(zhí)行。
這里增加一個immediate參數(shù)來設置是否要立即執(zhí)行:
function debouce(func,delay,immediate){ var timer = null; return function(){ var context = this; var args = arguments; if(timer) clearTimeout(time); if(immediate){ //根據(jù)距離上次觸發(fā)操作的時間是否到達delay來決定是否要現(xiàn)在執(zhí)行函數(shù) var doNow = !timer; //每一次都重新設置timer,就是要保證每一次執(zhí)行的至少delay秒后才可以執(zhí)行 timer = setTimeout(function(){ timer = null; },delay); //立即執(zhí)行 if(doNow){ func.apply(context,args); } }else{ timer = setTimeout(function(){ func.apply(context,args); },delay); } } }
節(jié)流是另一種處理類似問題的解決方法。
節(jié)流函數(shù)允許一個函數(shù)在規(guī)定的時間內(nèi)只執(zhí)行一次。
它和防抖動最大的區(qū)別就是,節(jié)流函數(shù)不管事件觸發(fā)有多頻繁,都會保證在規(guī)定時間內(nèi)一定會執(zhí)行一次真正的事件處理函數(shù)。
比如在頁面的無限加載場景下,我們需要用戶在滾動頁面時,每隔一段時間發(fā)一次 Ajax 請求,而不是在用戶停下滾動頁面操作時才去請求數(shù)據(jù)。這樣的場景,就適合用節(jié)流閥技術來實現(xiàn)。
主要有兩種實現(xiàn)方法:
var throttle = function(func,delay){ var prev = Date.now(); return function(){ var context = this; var args = arguments; var now = Date.now(); if(now-prev>=delay){ func.apply(context,args); prev = Date.now(); } } }
當高頻事件觸發(fā)時,第一次應該會立即執(zhí)行(給事件綁定函數(shù)與真正觸發(fā)事件的間隔如果大于delay的話),而后再怎么頻繁觸發(fā)事件,也都是會每delay秒才執(zhí)行一次。而當最后一次事件觸發(fā)完畢后,事件也不會再被執(zhí)行了。
當觸發(fā)事件的時候,我們設置一個定時器,再觸發(fā)事件的時候,如果定時器存在,就不執(zhí)行;直到delay秒后,定時器執(zhí)行執(zhí)行函數(shù),清空定時器,這樣就可以設置下個定時器。
var throttle = fucntion(func,delay){ var timer = null; return funtion(){ var context = this; var args = arguments; if(!timer){ timer = setTimeout(function(){ func.apply(context,args); timer = null; },delay); } } }
當?shù)谝淮斡|發(fā)事件時,肯定不會立即執(zhí)行函數(shù),而是在delay秒后才執(zhí)行。
之后連續(xù)不斷觸發(fā)事件,也會每delay秒執(zhí)行一次。
當最后一次停止觸發(fā)后,由于定時器的delay延遲,可能還會執(zhí)行一次函數(shù)。
可以綜合使用時間戳與定時器,完成一個事件觸發(fā)時立即執(zhí)行,觸發(fā)完畢還能執(zhí)行一次的節(jié)流函數(shù):
var throttle = function(func,delay){ var timer = null; var startTime = Date.now(); return function(){ var curTime = Date.now(); var remaining = delay-(curTime-startTime); var context = this; var args = arguments; clearTimeout(timer); if(remaining<=0){ func.apply(context,args); startTime = Date.now(); }else{ timer = setTimeout(func,remaining); } } }
需要在每個delay時間中一定會執(zhí)行一次函數(shù),因此在節(jié)流函數(shù)內(nèi)部使用開始時間、當前時間與delay來計算remaining,當remaining<=0時表示該執(zhí)行函數(shù)了,如果還沒到時間的話就設定在remaining時間后再觸發(fā)。當然在remaining這段時間中如果又一次發(fā)生事件,那么會取消當前的計時器,并重新計算一個remaining來判斷當前狀態(tài)。
以上就是“JavaScript防抖動與節(jié)流如何處理”這篇文章的所有內(nèi)容,感謝各位的閱讀!相信大家閱讀完這篇文章都有很大的收獲,小編每天都會為大家更新不同的知識,如果還想學習更多的知識,請關注億速云行業(yè)資訊頻道。
免責聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權內(nèi)容。