点击按钮后缩短setTimeout循环的Interval为何不生效？

先看你提供的代码：

Interval = 20000;

timer = setTimeout(function loop(){ 
   //do something
   timer = setTimeout(loop, Interval);                  
}, 1);

$("#next_button").click(function(e) {                            
   Interval = 1;
}); 

原因分析 #

问题的核心是：已经被setTimeout调用的延迟值是固定的，修改变量不会回溯影响已排队的定时器。

当你第一次启动定时器时，setTimeout(loop, Interval)会读取当时Interval的数值（20000）并保存，后续哪怕你修改Interval为1，这个已经在等待的定时器还是会按照20000毫秒的延迟才触发loop函数。只有当这个定时器执行完毕，再次调用setTimeout(loop, Interval)时，才会读取新的Interval值。这就是为什么点击按钮后间隔没有立即生效。

解决方法 #

要让间隔修改立即生效，需要先清除当前处于等待状态的定时器，再用新的间隔重新启动：

// 用let声明变量，避免污染全局作用域
let Interval = 20000;
let timer;

function loop() {
  // do something
  timer = setTimeout(loop, Interval);
}

// 初始化定时器
timer = setTimeout(loop, 1);

$("#next_button").click(function(e) {
  // 清除当前等待的定时器
  clearTimeout(timer);
  // 更新间隔
  Interval = 1;
  // 立即启动新的定时器，使用新间隔
  timer = setTimeout(loop, Interval);
});

这样修改后，点击按钮就能立即终止旧的等待定时器，同时用1毫秒的间隔启动新的定时器，达到即时缩短执行间隔的效果。

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