按住按钮数字递增故障：松开按钮无法停止数值增长

问题根源 #

你的代码存在两个关键错误：

• 没有保存setInterval返回的定时器唯一ID，导致clearInterval无法定位要停止的定时器
• stop()函数里调用increase()会重新创建新的定时器，完全没处理之前运行的那个

修复后的完整代码 #

<div class="col-md-3">
  <button type="button" class="btn btn-success" id="secondButton" onmousedown="increase()" onmouseup="stop()">Up</button>
</div>

<script>
let intervalId;
let number = 0; // 初始化数字变量，避免未定义错误

function myIntervalFunction() {
    number = number + 1;
    console.log(number);
}

function increase(){
    // 先清除已有定时器，防止多次按下叠加
    if(intervalId) clearInterval(intervalId);
    // 启动定时器并保存ID
    intervalId = setInterval(myIntervalFunction, 1000);
}

function stop() {
    // 清除对应定时器
    clearInterval(intervalId);
    intervalId = null; // 重置ID，避免后续无效操作
}
</script>

关键改动说明 #

• 新增intervalId变量存储定时器ID，这是clearInterval能精准停止定时器的核心
• increase()中先清除旧定时器，避免用户多次按下按钮导致多个定时器同时运行，数字跳变异常
• 初始化number变量，解决未定义变量的控制台报错问题

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