防抖與節流

防抖和節流在很多場景下都可以有效的提公升程式的效能和減輕伺服器的壓力.估計大多數人都使用過這兩個工具函式(例如在lodash中以函式或裝飾器的模式to use)那麼如何實現自己的防抖和節流函式呢?

定義

實現(具體思路的在注釋中體現,因為並不複雜)

防抖

/**
* 函式防抖
* @param   fn        頻繁觸發的函式   type function
* @param   delay     延遲           type number
* @param   immediate 是否立即觸發一次 type boolean
*/const
debounce
=(fn, delay =
300, immediate =
false
)=>
else
, delay);}
}else
, delay);}
return result
};}

節流

/**
* 函式節流
* @param fn        頻繁觸發的函式   type function
* @param delay     延遲            type number
* @param limit     必觸發時間限制   type number
*/const
throttle
=(fn, delay =
300, limit =
1000
)=>
else
, delay);}
return result;
}}

節流與防抖

瀏覽器中某些計算和處理要比其他的昂貴，例如在瀏覽器中操作dom比非dom互動需要更多的記憶體和cpu的事件，連續嘗試進行過多的dom相關操作可能ui導致瀏覽器掛起，有時甚至會崩潰。尤其在ie中使用onresize事件處理程式的時候容易發生，當調整瀏覽器大小的時候，該事件會連續觸發。在onresize...

防抖與節流

防抖當事件持續觸發，一定時間內沒有觸發事件函式處理一次。比如輸入框的ajax請求做模糊查詢節流當時間持續觸發，在一秒內只能觸發一次。比如滾動條持續向下滾動，載入更多資料 function debounce fn,wait function throttle func,delay functio...

節流與防抖

在實際開發中，我們經常會遇到一類需求根據input輸入容來校驗或者搜尋資料，根據視窗的大小變化來進行相關操作等。如果事件操作函式跟使用者的操作保持實時同步，那麼當使用者的操作十分頻繁時，就會多出許多無用的事件操作，並加重瀏覽器的負擔，影響頁面的效能。這時我們可以採用debounce 防抖和thr...

防抖與節流

節流與防抖

防抖與節流

節流與防抖

相關推薦