jQuery Ajax场景下如何清除已激活setTimeout？重复触发问题咨询

你的思路方向是对的——要避免重复定时器就得先清掉旧的再建新的，但你写的代码没法实现这个效果，因为每次执行时var time都是新的局部变量，之前的定时器ID根本没被保存下来，clearTimeout(time)相当于在清一个undefined，完全起不到作用。

为什么会这样？ #

setTimeout会返回一个唯一的数字ID，要清除对应的定时器，必须传入这个ID。如果每次都在触发时声明局部的time，那每次的time只在当前这次调用的作用域里有效，下次触发时，旧的ID已经丢失了，自然清不掉之前的定时器。

正确的实现方式 #

你需要把定时器ID存储在一个后续触发能访问到的地方，这里有几种常用方案：

1. 使用全局变量（简单场景适用）

在函数外部声明一个变量来保存ID，每次触发时先清旧的，再存新的：

// 全局作用域声明变量
let timeoutId;

// 你的触发函数里
function handleAjaxTrigger() {
  // 先清除之前的定时器（如果存在）
  clearTimeout(timeoutId);
  // 新建定时器并保存ID
  timeoutId = setTimeout(function() {
    $('#hello').fadeOut();
  }, 2600);
}

2. 绑定到DOM元素的data属性（更优雅，避免全局污染）

如果你的定时器和某个DOM元素相关（比如这里的#hello），可以用jQuery的data()方法把ID存在元素上，这样不会污染全局，还能和元素一一对应：

function handleAjaxTrigger() {
  const $hello = $('#hello');
  // 取出之前的定时器ID并清除
  const oldTimeoutId = $hello.data('timeoutId');
  if (oldTimeoutId) {
    clearTimeout(oldTimeoutId);
  }
  // 新建定时器并把ID存在元素上
  const newTimeoutId = setTimeout(function() {
    $hello.fadeOut();
  }, 2600);
  $hello.data('timeoutId', newTimeoutId);
}

3. 用闭包保存ID（适合封装在函数内部）

如果不想用全局变量也不想绑DOM，可以用闭包把ID封装在函数作用域里：

const handleAjaxTrigger = (function() {
  let timeoutId; // 闭包内的变量，每次调用都能访问
  return function() {
    clearTimeout(timeoutId);
    timeoutId = setTimeout(function() {
      $('#hello').fadeOut();
    }, 2600);
  };
})();

总结 #

核心就是：必须让每次触发时能拿到上一次的定时器ID，所以ID要存在一个跨调用能访问的作用域里——全局变量、DOM data、闭包变量都是可行的，而你最初的局部变量写法因为每次都重新声明，根本存不住旧ID，所以无效。

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