淺談debounce & throttle 極簡思想

原因:
通常綁定響應(yīng)鼠標(biāo)移動、窗口大小調(diào)整、滾屏等事件時(shí),綁定的函數(shù)觸發(fā)的頻率會很頻繁。
若稍處理函數(shù)微復(fù)雜,需要較多的運(yùn)算執(zhí)行時(shí)間和資源,往往會出現(xiàn)延遲,甚至導(dǎo)致假死或者卡頓感。
目的:
為了優(yōu)化性能,這時(shí)就很有必要使用debouncethrottle

debounce函數(shù)通常稱為防抖動函數(shù),該函數(shù)會從上一次被調(diào)用后,延遲 wait 毫秒后調(diào)用 fn.

//簡單實(shí)現(xiàn)
function debounce(fn, wait) {   
    wait = wait || 0;   
    let timer;    
 
    return function () {   
        if (timer) {   
            clearTimeout(timer);
            timer= null;   
        }  
        timer= setTimeout(function() {   
            fn();
      }, wait);
   };
 }

throttle節(jié)流函數(shù),在 wait 秒內(nèi)最多執(zhí)行 fn 一次的函數(shù)。

function throttle( fn ,delay){
   delay = delay || 0;   
   var timer, lastTime = 0; 
    return function(){
       var current  = new Date().getTime();
       if(current >= lastTime + delay){
         fn();
         lastTime = current;   
       }else{
         if (timer ) {   
             clearTimeout(timer );   
             timer = null;   
         }   
         timer = setTimeout(function(){
           fn();
         },delay)
       }   
   }
}
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

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