clearInterval无法停止setInterval设置的页面滚动定时器问题求助

核心问题原因 #

• scroll_id作用域错误：你把scroll_id声明为handleMIDIMessage函数的局部变量，每一次MIDI事件触发函数执行时，都会创建一个全新的scroll_id变量，之前踩下踏板时存储的定时器ID已经丢失，无法被后续事件访问。
• 松开踏板执行clearInterval(scroll_id)时，当前函数作用域内的scroll_id没有被赋值，实际传入的是undefined，完全无法停止正在运行的定时器，所以页面会持续滚动。
• 额外隐患：如果多次重复踩踏板，会创建多个没有被追踪的定时器，页面滚动速度会越来越快，且所有定时器都无法正常清除。

修复方案 #

把scroll_id移到函数外部的上层作用域，保证所有事件回调都访问同一个变量存储定时器ID，同时每次创建新定时器前先清除旧实例，避免重复生成：

// 把定时器ID变量声明在函数外部，全局可复用
var scroll_id;
function handleMIDIMessage(event) {
  if (event.data.length === 3) {
    if (event.data[0] == 176 && event.data[1] === 67) {
      if (event.data[2] > 0) {
        // 新建定时器前先清除旧的，避免重复创建多个滚动任务
        clearInterval(scroll_id);
        scroll_id = setInterval(function() {
          window.scrollBy({
            top: 50,
            behaviour: "smooth"
          });
        }, 1000);
        document.body.style.background = 'green';
      } else {
        document.body.style.background = 'red';
        clearInterval(scroll_id);
      }
    }
  }
}

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