js 函數節流和防抖

js 函數節流和防抖

防抖和節流的做用都是防止函數屢次調用。區別在於，假設一個用戶一直觸發這個函數，且每次觸發函數的間隔小於wait，防抖的狀況下只會調用一次，而節流的 狀況會每隔必定時間（參數wait）調用函數。

throttle 節流

節流是將屢次執行變成每隔一段時間執行。
每隔一段時間後執行一次，也就是下降頻率，將高頻操做優化成低頻操做。

應用場景

• 觸發mousemove事件的時候， 如鼠標移動。
• 觸發keyup事件的狀況， 如搜索。
• 觸發scroll事件的時候， 譬如鼠標向下滾動中止時觸發加載數據。
• 頁面窗口的resize事件

coding

方法1 節流

// function resizehandler(fn, delay){
//   clearTimeout(fn.timer);
//   fn.timer = setTimeout(() => {
//      fn();
//   }, delay);
// }
// window.onresize = () => resizehandler(fn, 1000);

方法2 閉包 節流

function resizehandler(fn, delay){
    let timer = null;
    return function() {
      const context = this;
      const args=arguments;
      clearTimeout(timer);
      timer = setTimeout(() => {
         fn.apply(context,args);
      }, delay);
    }
 }
 window.onresize = resizehandler(fn, 1000);

debounce 防抖

一段時間內觸發事件只執行一次。

應用場景

• 按鈕點擊事件/input事件，防止用戶屢次重複提交
• 電話號碼輸入的驗證， 只需中止輸入後進行一次。

coding

function resizehandler(fn, delay, duration) {
        let timer = null;
        let beginTime = +new Date();
        return function() {
          const context = this;
          const args = arguments;
          const currentTime = +new Date();
          timer && clearTimeout(timer);
          if ((currentTime - beginTime) >= duration) {
            fn.call(context, args);
            beginTime = currentTime;
           } else {
             timer = setTimeout(() => {
               fn.call(context, args)
             }, delay);
           }
        }
      }

        window.onresize = resizehandler(fn, 1000, 1000);

Demo
CodePen-demo

參考文章
http://www.alloyteam.com/2012...