前言

防抖、節流主要用於頻繁事件觸發，例如鼠標移動、改變窗口大小等。lodash等函數庫具備相對應的api， _.debounce 、_.throttle。

核心技術：閉包。

區別：

• 防抖， 連續觸發， 第一次和最後一次觸發有效
• 節流， 一段時間內僅觸發一次（第一次）

本文以防抖函數為例， 詳細說明。

實現

原理， 計時器存儲狀態。

function debounce(fn, delay) {
    return function() {
        console.log(fn.timer, count2);
        let _this = this;
        let _args = arguments;
        fn.timer !== undefined && clearTimeout(fn.timer);
        fn.timer = setTimeout(function() {
            fn.apply(_this, _args);
        }, delay);
    }
}
// 替換
debounce(oldFunction, delay)();
 

改進, 可多處調用

/**
 * 防抖函數
*/
function debounce(fn, delay) {
    let timer;
    return function () {
        let _this = this;
        let _args = arguments;
        console.log(timer, count2)
        timer !== undefined && clearTimeout(timer);
        timer = setTimeout(function () {
            fn.apply(_this, _args);
        }, delay);
    }
}
var newFucntion = debounce(oldFunction, delay);
// 替換
newFunction();
 

我的測試連接， 打開控制臺查看

參考

靈感-薄荷周刊， 有錯誤， 僅供參考

參考blog

參考演示

【源碼】防抖和節流源碼分析