前言

防抖、節流主要用於頻繁事件觸發，例如滑鼠移動、改變視窗大小等。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

參考演示