函数防抖

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/dadadeganhuo/article/details/80742552

debounce 到底怎么写

如下函数

// 如何写成一个闭包 。。。。
let timer;
function debounce (delay, fn) {
    if (timer) clearTimeout(timer);
    timer = setTimeout(fn, delay);
}

window.addEventListener('scroll', debounce(1000, fn))

这里直接运行debounce 函数，通过全局的 timer 清空，使一直只存在一个定时器。

那如何把 timer 和 debounce 封装，让它变成一个函数呢。并且可以通过判断 timer 存在, 清空 timer 只保留一个定时器呢 ？？这里就要用到闭包的概念了。 抱歉，我解释不出来 - -

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

这里在内部定义了一个 timer 变量，返回了一个函数，函数里用到了外部的 timer 变量。

let _debounce = debounce(1000,  fn); 

这里的 _debounce 就是返回的函数了。 因为函数已经存在并是 同一个 函数，所以里面的 timer 也会一直存在，这就是闭包。 它所引用的外部变量不会清空。

监听事件就变成了：

window.addEventListener('scroll', _debounce);