闽公网安备 35020302035485号
function debounce(func, wait) {
let timeout; // timeout 是闭包中的变量
// 堆代码 duidaima.com
return function(...args) {
const context = this;
// 每次调用清除前一个定时器
clearTimeout(timeout);
// 设置一个新的定时器
timeout = setTimeout(() => {
func.apply(context, args); // 在 wait 时间后执行
}, wait);
};
}
下面有几个问题答案肯定是不行的,因为它就没有暴露出来,所以这又是闭包的又一好处,无法被外部直接访问
const package = debounce(cellback,1000); const clickOne = package(arg1); const chickTwo = package(arg2);
那么它们两个访问到的timeout 一样吗 ?我们知道当我们定义一个add函数,每次调用 add 函数时,如果传入不同的 args,那么每次生成的函数执行上下文环境(即 this 以及函数内的变量和参数)是不同的。这是因为每次函数调用都会有独立的执行上下文,因此函数内部的变量和参数在不同的调用之间不会相互影响。
function debounce(func, wait) {
let timeout; // 这个变量是共享的
return function (...args) {
const context = this;
clearTimeout(timeout); // 清除前一次的定时器
timeout = setTimeout(() => { // 设置新的定时器
func.apply(context, args);
}, wait);
};
}
const d1 = debounce((...args) => console.log('Callback executed with:', ...args), 1000);
const c1 = d1('args1'); // 第一次调用,启动了一个定时器
const c2 = d1('args2'); // 第二次调用,会清除第一次调用的定时器,并启动一个新的定时器
看运行结果
第一次的呢,显然被第二次调用清除了
const d1 = debounce(() => console.log('Executed 1'), 1000);
const d2 = debounce(() => console.log('Executed 2'), 1000);
d1(); // 第一次调用 d1,启动 d1 的计时器
d2(); // 第一次调用 d2,启动 d2 的计时器,互不干扰
结果:两个不同的防抖函数实例各自执行,输出 'Executed 1' 和 'Executed 2'。