AJAX调用时清除旧setInterval并设置新定时器问题求助

我明白你遇到的困扰了——定时器变量的作用域问题是核心！你之前尝试的各种方案没生效，主要是因为interval被定义在AJAX的success回调内部，每次新的AJAX请求触发时，旧的定时器变量已经超出了访问范围，根本没法调用clearInterval去清除它。

下面是具体的解决方案，同时包含按键清除定时器的功能：

关键思路 #

• 将interval变量提升到外部作用域（比如全局或者包裹函数的作用域，避免污染全局的话可以用IIFE），让所有需要操作定时器的地方都能访问到它。
• 在发起新的定时器之前，先检查是否已有活跃的定时器，若有则立即清除。
• 单独监听按键事件，在需要时清除定时器。

修改后的完整代码 #

// 把interval变量放在外部作用域，确保所有回调都能访问到
let interval = null;

// 监听表单变化发起AJAX
$("#title-form").change(function () {
  const title = $(this).val().trim();
  
  // 先清除之前可能存在的定时器！这一步很关键
  if (interval) {
    clearInterval(interval);
    interval = null; // 重置变量，避免后续判断出错
  }

  $.ajax({
    url: '/ajax/timing_check/',
    type: "get",
    data: { 'title': title },
    dataType: 'json',
    success: function (data) {
      if (data.count_down) {
        let end = data.count_down;
        let mins = Math.floor(end / 60);
        let secs = end % 60;

        // 清除之前可能遗留的定时器（双重保险）
        if (interval) clearInterval(interval);
        
        // 设置新的定时器
        interval = setInterval(function count() {
          console.log(parseInt(secs));
          secs -= 1;
          // 可选：当倒计时结束时自动清除定时器
          if (secs < 0) {
            clearInterval(interval);
            interval = null;
          }
        }, 1000);
      } else {
        // 没有倒计时数据时，清除定时器
        if (interval) {
          clearInterval(interval);
          interval = null;
        }
      }
    }
  });
});

// 实现按键按下清除定时器的功能，这里以ESC键为例，可根据需求修改按键
$(document).keydown(function (e) {
  // ESC键的keyCode是27，可替换成你需要的按键
  if (e.keyCode === 27 && interval) {
    clearInterval(interval);
    interval = null;
    console.log("定时器已通过按键清除");
  }
});

代码解释 #

1. 作用域调整：把interval变量放在所有回调函数外部，这样无论是AJAX的success回调还是按键事件回调，都能访问并修改这个变量。
2. 前置清除：在发起AJAX请求时就先清除旧定时器，避免新请求触发后多个定时器同时运行。
3. 双重保险：在success回调里再次检查并清除定时器，防止极端情况下的遗漏。
4. 按键监听：通过keydown事件监听指定按键，触发时清除活跃的定时器。

这样修改后，每次AJAX调用都会先终止之前的定时器，再创建新的，按键清除功能也能正常工作啦！

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