JS中節(jié)流和防抖函數(shù)

防抖和節(jié)流的區(qū)別,防抖是把多次操作合并成一個觸發(fā)執(zhí)行,節(jié)流相當于開水龍頭,水大了關(guān)小,一段時間執(zhí)行一次

函數(shù)防抖(debounce):

當持續(xù)觸發(fā)事件時,一定時間段內(nèi)沒有再觸發(fā)事件,事件處理函數(shù)才會執(zhí)行一次,如果設(shè)定的時間到來之前,又一次觸發(fā)了事件,就重新開始延時。

限定多少秒時間之內(nèi) ,它只能執(zhí)行一次,如果執(zhí)行多次,也只取最后的那一次

注:定時器記得return出去,執(zhí)行函數(shù)的apply指向,且盡量使用es5函數(shù),不用箭頭函數(shù),this指向的是window,es5中,this指向事件本身

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

????Throttle? 與防抖區(qū)別:無需清理定時器,而防抖會清除之前的計時器而重新設(shè)置。這樣一來,只有最后一次操作能被觸發(fā),定時器內(nèi)的timer=null不能少

總結(jié):

函數(shù)防抖:將幾次操作合并為一此操作進行。原理是維護一個計時器,規(guī)定在delay時間后觸發(fā)函數(shù),但是在delay時間內(nèi)再次觸發(fā)的話,就會清除之前的計時器而重新設(shè)置。這樣一來,只有最后一次操作能被觸發(fā)。

函數(shù)節(jié)流:使得一定時間內(nèi)只觸發(fā)一次函數(shù)。原理是通過判斷是否到達一定時間來觸發(fā)函數(shù)。

區(qū)別:?函數(shù)節(jié)流不管事件觸發(fā)有多頻繁,都會保證在規(guī)定時間內(nèi)一定會執(zhí)行一次真正的事件處理函數(shù),而函數(shù)防抖只是在最后一次事件后才觸發(fā)一次函數(shù)。 比如在頁面的無限加載場景下,我們需要用戶在滾動頁面時,每隔一段時間發(fā)一次 Ajax 請求,而不是在用戶停下滾動頁面操作時才去請求數(shù)據(jù)。這樣的場景,就適合用節(jié)流技術(shù)來實現(xiàn)。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

友情鏈接更多精彩內(nèi)容