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);