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'。