**函式防抖：**將幾次操作合併為一此操作進行。原理是維護一個計時器，規定在delay時間後觸發函式，但是在delay時間內再次觸發的話，就會取消之前的計時器而重新設定。這樣一來，只有最後一次操作能被觸發。

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

**函式節流：**使得一定時間內只觸發一次函式。原理是通過判斷是否到達一定時間來觸發函式。

// 時間差
function throttle(func, delay) {
    let prev = Date.now();
    return function() {
        let context = this;
        let args = arguments;
        let now = Date.now();
        if (now - prev >= delay) {
            func.apply(context, args);
            prev = Date.now();
        }
    }
 

}

// 定時器
function throttle2(func, delay) {
    let timer = null;
    return function() {
        let context = this;
        let args = arguments;
        if (!timer) {
            setTimeout(function() {
                func.apply(context, args);
                timer = null;
            }, delay);
 

        }
    }
}

// 混合使用更精準
var throttle = function(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);
              }
      }
}
function handle() {
      console.log(Math.random());
}
 window.addEventListener('scroll', throttle(handle, 1000));

區別： 函式節流不管事件觸發有多頻繁，都會保證在規定時間內一定會執行一次真正的事件處理函式，而函式防抖只是在最後一次事件後才觸發一次函式。 比如在頁面的無限載入場景下，我們需要使用者在滾動頁面時，每隔一段時間發一次 Ajax 請求，而不是在使用者停下滾動頁面操作時才去請求資料。這樣的場景，就適合用節流技術來實現。