JavaScript计时器 - 如何防止计时器每次加速

Question

我正在构建一个存储卡游戏。班级.DECK代表一张牌。每次我单击卡片时，计时器都会加快。如何防止计时器加速？

function startTimer() { 
    $(".deck").on("click", function () {
        nowTime = setInterval(function () {
            $timer.text(`${second}`)
            second = second + 1
        }, 1000);
    });
}

Answer 1

您启动多个间隔，每次点击一个。您可能应该开始一个。如果您想开始单击的第一张卡：

function startTimer() {
    // Maybe remove old timer? Should happen somewhere in your code.
    // Possibly "stopTimer" if you have such a function.
    clearInterval(nowTime);
    let started = false;
    $(".deck").on("click", function () {
        if (started) return;
        nowTime = setInterval(function () {
            $timer.text(`${second}`)
            second = second + 1
        }, 1000);
        started = true;
    });
}

不过，该代码应该有更多清理。否则您会积累大量的死活动听众。

_{(此外，我相信永远不应该使用jQuery。(}

Answer 2

您需要在启动新计时器之前停止上一个计时器，因为，如果您不这样做，则与多个计时器回调函数结束，所有这些计时器都立即执行一个，这给幻想您的单个计时器正在加速。

function startTimer() { 
  $(".deck").on("click", function () {
    clearInterval(nowTime);  // Stop previous timer
    nowTime = setInterval(function () {
      $timer.text(`${second}`);
      second = second + 1;
    }, 1000);
  });
}

解决此问题的另一种方法是仅允许click事件回调在第一次单击按钮时运行：

function startTimer() { 
  $(".deck").on("click", timer);
  function timer() {
    nowTime = setInterval(function () {
      $timer.text(`${second}`);
      second = second + 1;
    }, 1000);
   $(".deck").off("click", timer); // Remove the click event handler
  }
}