点击清除按钮后Click Me按钮无法重启计时器该如何解决

• 重复绑定b1的点击事件：在myTimer函数内部重新给b1绑定了onclick事件，覆盖了初始的启动定时器逻辑，后续点击b1只会直接执行myTimer不会重新启动定时器。
• 倒计时变量未重置：全局变量sec倒计时到-1后没有重置为初始值5，后续启动计时器直接满足sec <= -1的条件，直接显示超时。
• Clear按钮逻辑不完整：当前Clear按钮只清空了显示文本，没有重置倒计时变量、未清理正在运行的定时器。

JS代码 #

var sec = 5;
var timerID;

// 初始绑定b1点击事件，仅执行一次，不要在定时器回调里重复绑定
document.getElementById("b1").onclick = function() {
  // 点击前先清理上一次的定时器，避免重复启动多个定时器
  if(timerID) clearInterval(timerID);
  // 重置倒计时秒数
  sec = 5;
  timerID = setInterval(myTimer, 1000);
};

function myTimer() {
  document.getElementById('demo').innerHTML = sec + "sec.";
  sec--;
  if (sec <= -1) {
    clearInterval(timerID);
    document.getElementById("demo").innerHTML = "Time's Up!";
  }
}

$(document).ready(function() {
  $("#b2").click(function() {
    // 清理正在运行的定时器
    if(timerID) clearInterval(timerID);
    // 重置倒计时秒数
    sec = 5;
    // 清空显示文本
    $("#demo").html("");
  })
})

HTML代码（无修改，可直接复用） #

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>

<body>
  <button id="b1">Click Me!</button>
  <p id="demo"></p>
  <button id="b2">Clear!</button>
</body>

</html>

现在点击Click Me可以启动计时器，计时结束后再次点击会自动重置秒数重新计时；点击Clear按钮会清空显示、停止当前计时、重置秒数，之后再点击Click Me可以正常启动新的计时。

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