節流和防抖

 

節流和防抖的目的都是防止某一時間頻繁觸發，但是原理不一樣

函數防抖是某一段時間內只執行一次，而函數節流是間隔時間執行

防抖：

在事件被觸發n秒後再進行回調，如果這期間又被觸發，則重新計時

代碼實現：

function debounce(fn, wait) {
    var timeout = null;
    return function() {
        if(timeout !== null) 
                clearTimeout(timeout);
        timeout = setTimeout(fn, wait);
    }
}

應用：

function handle(){xxx}
window.addEventListener('scroll',debounce(handle,1000))

意思是監聽scroll事件，事件處理函數handle只停止滾動1000ms以後纔會執行一次，也就是說在持續觸發scroll事件的過程中，事件處理函數handle一直沒有執行

節流：

規定在一個單位時間內，只能觸發一次函數。如果這個單位時間內觸發多次函數，只有一次生效。一般利用時間戳+定時器來實現

function throttle(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);
              }
      }
}

 

應用場景：

       debounce:

               search搜索聯想，用戶不斷輸入時，用防抖來節約請求資源

               window觸發resize的時候，不斷的調整瀏覽器窗口大小會不斷觸發這個事件，用防抖來讓其只觸發一次

       throttle

              鼠標不斷點擊觸發，mousedown(單位事件內只觸發一次)

              監聽滾動事件，比如是否滑到底部自動加載跟多