1. 程式人生 > 其它 >手寫防抖與節流,及其實現原理

手寫防抖與節流,及其實現原理

技術標籤:JavaScript專欄javascript

防抖(小括號裡為說明)

在規定的時間(wait)內執行被調函式(fn),當高速被呼叫時(小與規定時間),重新開始計算時間(wait),直至在規定時間(wait)內沒有再次被呼叫時,或者最後一次呼叫時,才真正的執行被調函式。

function debounce(fn,wait){
  let timer;
  return function(){
    let context = this;
    let args = arguments;
    clearTimeout(timer)
    timer = null;
    timer =
setTimeout(function(){ fn.apply(context,args); clearTimeout(timer); timer = null; },wait) } }

節流(小括號裡為說明)

在規定的時間(wait)內執行被調函式(fn),當高速被呼叫時(小與規定時間),在規定的時間(wait)後開始第一次執行被調函式(fn),直至結束,再次在規定的時間(wait)後執行被調函式(fn),如此迴圈。

function throttle(fn,wait){
  let timer;
  return function(){
    let
context = this; let args = arguments; if(!timer){ timer = setTimeout(function(){ fn.apply(context,args); clearInterval(timer); timer = null; },wait) } } }