javascript - 需要检查按钮是否被单击以便不继续执行功能

Question

所以我正在尝试制作一个游戏，当单击“开始”按钮时，计时器会启动，并且出现额外的按钮也会将“开始”按钮更改为“暂停”。其中一个按钮是“重新启动”，它会重新启动计时器并返回“开始”按钮。如果在计时器运行时单击“重新启动”，一切都会正常。如果在计时器“暂停”时单击“重新启动”，则会重置时间，但当游戏再次“开始”时，基本上两个计时器会同时启动。我知道我需要检查是否单击了“重新启动”按钮，然后不启动“启动”功能，但我不知道如何检查。我尝试使用“data”属性，然后将“start”函数放入if语句中，但该函数不起作用。

我的代码在这里 https://jsfiddle.net/peliudzemas/kn3qeuct/1/

$(document).ready(function() {
  $(playButton).on('click', function() {
    displayChange();
    $(time).text(selectedTime + " s");
  });
  startGame();
  restartGame();
});

//Action on "start game" button
//Sets off the timer, adds extra buttons
function startGame() {
  $('.startGame').on('click', function () {
    timerFunction();
    interval1();
    $(this).text("pause the game").css({
      "background-color": "#E05263",
      "color": "white"
    });

    $(this).off('click');
    $(this).removeClass().addClass('pauseGame');
    createButtons();
    pauseGame();
    });
}
//Action on "pause game" button
//Pauses the timer, changes one button
function pauseGame () {
  $('.pauseGame').on('click', function () {
    clearInterval(interval);
    $(this).off('click');
    $(this).removeClass().addClass('resumeGame');
    $(this).text("resume the game").css({
      "background-color": "#73BA9B",
      "color": "white"
    });
    resumeGame();
  });
}

//Action on "resume game" buttons
//Resumes game after it was paused
function resumeGame() {
  $('.resumeGame').on('click', function() {
    interval1();
    $(this).off('click');
    $(this).removeClass().addClass('pauseGame');
    $(this).text("pause the game").css({
      "background-color": "#E05263",
      "color": "white"
    });
    pauseGame();
  });
}

//Action on "restart game" buttons
//Resets and Stops the timer
function restartGame() {
  $(restartButton).on('click', function(){
    $(this).next().removeClass().addClass('startGame');
    $('.startGame').text('start new game').css({
      "background-color": "#73BA9B",
      "color": "white"
    });
    timer = selectedTime;
    $(time).text(selectedTime + " s").css("color", "white");
    clearInterval(interval);
    timerFunction();
    startGame();
  });
}

Answer 1

试试这个:

...
// just an interval set to a variable
function interval1 () {
  clearInterval(interval);
  interval = setInterval(timerFunction, 1000);
}
...

JSFidle