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
  }

}

Javascript计时器 - 如何防止计时器每次加速.deck被点击？

2 个答案: