JavaScript防抖函数中clearTimeout作用及相关执行逻辑疑问

问题1：在mouseMoveHandler回调中每次调用都会创建新的debounce函数，为何debounce仍能通过clearTimeout清除之前的函数？它是如何关联到之前的函数的？ #

核心原因是debounce返回的perform函数调用时，this指向浏览器的全局对象window。每次执行perform时，都会把lastCall（上一次调用时间）和lastCallTimer（定时器ID）挂载到window上，相当于用全局变量保存了防抖的状态。

哪怕每次调用debounce都会生成新的perform函数实例，但这些实例共用同一个this（window），所以新的perform调用时，能直接读取到上一次存在window上的定时器ID，进而用clearTimeout清除之前的定时器。

看代码里的关键逻辑：

// perform函数内的状态操作
let previousCall = this.lastCall; // 读取全局保存的上一次调用时间
this.lastCall = Date.now(); // 更新全局的调用时间
if (previousCall && this.lastCall - previousCall <= timeoutMs) {
  clearTimeout(this.lastCallTimer); // 清除全局保存的上一个定时器
}
this.lastCallTimer = setTimeout(() => callee(...args), timeoutMs); // 把新定时器ID存到全局

问题2：为何console.log('2')仅在3秒后执行一次？ #

当你移动鼠标时，mousemove事件会高频触发mouseMoveHandler，每次触发都会做两件事：

1. 如果body有active类，就移除它并打印1；
2. 调用debounce生成新的防抖函数并立即执行。

由于鼠标移动的间隔远小于3秒，每次执行防抖函数时，都会触发clearTimeout(this.lastCallTimer)，把上一次设置的定时器删掉，然后重新设置一个新的3秒定时器。只有当你停止移动鼠标超过3秒，最后那个定时器才不会被清除，到时间后执行回调，打印2并添加active类。

简单说：鼠标移动期间的所有定时器都会被连续清除，只有停止移动后的最后一个定时器能正常触发，所以console.log('2')只会执行一次。

问题3：请解释以下写法的含义： #

debounce(() => {
  document.body.classList.add('active')
  console.log('2')
}, 3000)();

这是高阶函数的立即调用写法，拆解来看：

1. debounce是高阶函数，接收两个参数：要防抖的回调函数、超时时间3000毫秒；
2. debounce(...)执行后会返回内部定义的perform函数；
3. 末尾的()表示立即调用这个返回的perform函数，相当于触发一次防抖逻辑的处理流程。

在当前场景里，这种写法的作用是：每次鼠标移动时，立即启动（或重置）3秒的防抖定时器，而不是等其他事件触发再调用防抖逻辑。

附相关代码示例 #

function debounce(callee, timeoutMs) {
  return function perform(...args) {
    let previousCall = this.lastCall;
    this.lastCall = Date.now();
    if (previousCall && this.lastCall - previousCall <= timeoutMs) {
      clearTimeout(this.lastCallTimer);
    }
    this.lastCallTimer = setTimeout(() => callee(...args), timeoutMs);
  };
}

function mouseMoveHandler(){
  if(document.body.classList.contains('active')){
    console.log('1')
    document.body.classList.remove('active');
  }
     debounce(() => {
      document.body.classList.add('active')
      console.log('2')
    }, 3000)();
}

document.addEventListener('mousemove', mouseMoveHandler)

.active{
  background: aqua;
}

内容的提问来源于stack exchange，提问作者user20478727