JavaScript函数内创建的setInterval定时器无法正常停止该如何解决？

• 全局作用域声明的count变量被gameClock函数内的局部count变量覆盖，导致全局count始终为undefined，执行clearInterval(count)时无法找到对应的计时器ID，所以无法终止计时。

删除gameClock函数内count赋值前的var关键字，让计时器ID直接赋值给全局的count变量即可。

核心修改代码段 #

修改前：

var count = setInterval(function() {
  setTime()
}, 1000);

修改后：

count = setInterval(function() {
  setTime()
}, 1000);

完整修复后代码 #

JavaScript代码 #

var count;

function gameClock() {
  var minutesLabel = document.getElementById("minutes");
  var secondsLabel = document.getElementById("seconds");
  var totalSeconds = 0;
  // 移除var，直接操作全局count变量
  count = setInterval(function() {
    setTime()
  }, 1000);

  function setTime() {
    ++totalSeconds;
    secondsLabel.innerHTML = pad(totalSeconds % 60);
    minutesLabel.innerHTML = pad(parseInt(totalSeconds / 60));
  }

  function pad(val) {
    var valString = val + "";
    if (valString.length < 2) {
      return "0" + valString;
    } else {
      return valString;
    }
  }
}

// 计时启停逻辑
$(document).on('click', '#f_start', function() {
  $("#half_name").text('FIRST HALF');
  gameClock();
})

$(document).on('click', '#f_stop', function() {
  clearInterval(count);
})

HTML代码 #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<div class="col-2">
  <button class="btn btn-success" id="f_start"> START</button>
</div>
<div class="col-2">
  <button class="btn btn-danger" id="f_stop"> STOP</button>
</div>
<!-- 原代码依赖的计时展示元素，需要添加到页面中 -->
<div>
  <span id="half_name"></span>
  <span id="minutes">00</span>:<span id="seconds">00</span>
</div>

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