JavaScript中能否通过其他函数终止setInterval循环并重置计数？

问题根因 #

• 变量与函数重名冲突：你同时声明了全局变量counter和同名函数counter()，JS中函数声明优先级更高，运行过程中修改counter的值会导致该标识符的指向在数字和函数之间混乱，既可能导致更新速率的函数调用报错，也会让速率值的修改不生效。
• reset逻辑错误：你要终止递增循环，调用clearInterval(timer)之后不需要再重新创建setInterval实例，你当前的写法清除旧定时器后又开启了一个间隔为0的新定时器，反而会让循环执行速度更快。
• 额外注意：setInterval的间隔值在定时器创建时就已经固定，你后续修改counter变量不会自动更新已经启动的定时器的执行间隔，必须重新调用速率更新函数才会生效。

修复方案 #

首先修改重名的变量/函数，避免标识符冲突，再调整reset的逻辑：

// 将控制速率的变量改名，避免和函数重名
var rateCounter = 0;
// 你用来递增业务数值的变量可以在这里声明，比如 var count = 0;

function create() {
  // 你的数值递增逻辑写在这里，比如 count++
}

var timer;

function loop() {
  create()
}

// 速率更新函数改名，进一步避免冲突
function updateTimerRate() {
  clearInterval(timer)
  timer = setInterval(loop, 1000 / (2 ** rateCounter))
}

调整reset函数逻辑，清除定时器后不需要新建定时器即可终止循环：

function reset() {
  // 重置速率值
  rateCounter = 0
  // 重置你的业务数值，比如 count = 0
  // 清除正在运行的定时器，直接终止循环
  clearInterval(timer)
  // 不需要再调用setInterval，否则会重新启动循环
}

如果后续需要重新启动递增逻辑，调用updateTimerRate()即可重新创建定时器运行。

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