簡述函數防抖和節流

1、函數防抖

  事件觸發之後，函數在n秒內只執行一次，如果在n秒內又觸發了一次，則會重新計算函數的執行時間。

  函數防抖適用於用戶輸入、提交按鈕的點擊事件等；函數防抖的核心就是：在用戶不觸發事件的時候，才觸發行爲，並且抑制了本來在事件中的行爲。

【代碼實現】

// fn：表示需要防抖的函數，wait表示間隔的時間，immediate表示是否立即執行
let debounce = function (fn, wait, immediate){
    let timer;// 聲明定時器
    return function () {
        // 該函數是用戶每次實際調用的防抖函數
        let self = this;// 定義上下文對象
        let args = arguments;// 獲取函數參數，保證上下文對象不變，且仍然可以使用e參數

        // 如果定時器已經存在，就清空定時器，重新定義一個新的定時器，重新計算時間，延遲執行用戶傳入的方法
        if (timer) clearTimeout(timer);
        if (immediate) {
            let calNow = !timer;
            timer = setTimeout(function () {
                timer = null;
            }, wait)
            if (callNow) fn.apply(self, args);// 如果是立即執行的話，那麼直接調用函數即可
        } else {
            timer = setTimeout (function () {
                // 執行fn函數
                fn.apply(self, args);// 函數的參數
            }, wait)// 如果用戶觸發事件的時間間隔小於wait，那麼在函數還沒有執行的時候，就已經清空了定時器，開始了重新記錄時間，函數行爲並不會被執行；
        }
    }
}

函數防抖的可立即執行：開始的時候，設置一個定時器，只要定時器存在，每次點擊就會重新計時，除非時間間隔大於delay，此時，定時器爲空，則可以執行函數

2、函數節流

  連續觸發事件，但是在n秒內，函數只會執行一次，節流會稀釋函數的執行頻率。函數節流會強制函數以固定的頻率執行，適用於resize、mousemove、touchmove、scroll等。

  防抖和節流的作用都是防止函數多次調用，二者的區別是：函數防抖是在事件觸發結束之後，調用函數；函數節流是每隔一定的時間間隔調用函數。函數防抖是將多次執行變爲一次執行；函數節流是以固定的頻率執行函數。

【代碼實現】

let throttle = function (fn, delay) {
    let timer = null;
    let previous = 0;
    return function () {
        let context = this;
        let args = arguments;
        let now = Date.now();
        let interval = now - previous;
        if (interval < delay) {
            timer = setTimeout(function () {
                fn.apply(context, args);
            }, delay);
        } else {
            fn.apply(context, args);
            previous = now;
        }
    }
}