jQuery document.ready内setInterval外部调用clearInterval失效问题

问题根因 #

清除定时器的逻辑不生效，核心是变量作用域不匹配：

• 原代码中again变量是在$(document).ready的回调内部用var声明的，属于ready回调的局部作用域，外部全局定义的klik2函数无法读取这个变量的值。
• 当klik2执行clearInterval(again)时，JS会沿着作用域链查找全局环境下的again，这个变量在全局不存在，clearInterval拿到的是undefined值，无法匹配到实际运行的定时器ID，因此不能终止2秒一次的轮询请求。

修复实现 #

两种改法均能解决问题，按需选择：

• 方案1：提升变量作用域至全局
  将again的声明从ready回调内部移出，让klik2可以正常访问到定时器ID：

  // 全局声明定时器变量
  let again = null;
  
  $(document).ready(function(){
      Dashboard("<?php echo base_url();?>Kasir/display")
      // 给全局变量赋值定时器返回的标识
      again = setInterval(function(){
          Dashboard("<?php echo base_url();?>Kasir/display")
      }, 2000);
  })
  
  function klik2(){
      alert('jwqeoiqej');
      clearInterval(again);
      // 优化：清除后置空，避免残留无效引用
      again = null;
  }
  

• 方案2：同作用域定义函数，减少全局污染
  如果不想把again暴露到全局环境，可以把klik2的定义放到ready回调内部，和again处于同一作用域，同时把函数挂载到window对象上，保证页面DOM的点击事件能正常触发：

  $(document).ready(function(){
      Dashboard("<?php echo base_url();?>Kasir/display")
      // 和函数同作用域定义定时器变量
      let again = setInterval(function(){
          Dashboard("<?php echo base_url();?>Kasir/display")
      }, 2000);
  
      // 挂载到全局，保证DOM事件可正常访问
      window.klik2 = function(){
          alert('jwqeoiqej');
          clearInterval(again);
          again = null;
      }
  })
  

注意：如果后续需要多次切换启动/停止轮询的逻辑，建议在启动新的轮询前先判断again是否存在，存在的话先清除，避免出现多个并行的定时器同时发请求的问题。

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