javascript - 计时器不停止并执行检查

Question

功能:

计时器将从 0 秒开始计时，直至 3 分钟的时间限制。用户必须按下按钮才能停止计时器，否则计时器将继续计时，直到达到时间限制。

当达到 3 分钟的时间限制时，将显示警报:“游戏结束”。

问题:

计时器可以从0秒开始计时，但是，当时间限制到3分钟时，它不会停止显示警报，而是会继续计时。

请问为什么定时器达到3分钟时限后不停止计数器并提示警报？

代码:

var GameTimer = 0;

var SetGameTimer;

var minutes = "";
var seconds = "";

function StartGame() {

  $("#Game_Elements").fadeIn({
    queue: false,
    complete: function() {

      RugbyGameTimer();

    }
  });
}
//Start Game Timer Count
function RugbyGameTimer() {


  //Start Game Timer
  SetGameTimer = setInterval(function() {

    GameTimer++;

    //get inidvidual value elements of the timer
    minutes = ('0' + Math.floor(GameTimer / 60)).slice(-2);
    seconds = ('0' + (GameTimer - minutes * 60)).slice(-2);

    //append timer to timer game elements
    $("#Game_Minute_timer").html(minutes);
    $("#Game_Second_timer").html(seconds);
  }, 1000);

  //Check Time value
  if (minutes < 3) {

    //Method call to check if button is pressed
    Interrupt_Game();

  } else if (minutes > 3) {
    //Check on time, if more than 10mins, automatically navigate to last game page

    //Stop Counter
    clearInterval(SetGameTimer);

    alert("Game Over");
  }
}


function InterruptGame() {

  //Method to do something
}

<!-- Game Timer Element -->
<div id="Game_Elements" style="display:none; position:absolute; z-index:7; top:0px; left:0px; width: 1920px; heigth: 1080px; margin:auto;">
  <table id="Game_Timer_Element">
    <tr>
      <td>
        <div id="Game_Minute_timer" style="z-index:50; position:absolute; top:440px; left:850px; font-size:160px; font-family:'Avenir'; width:1080; color:#fff;">
          <font face="Avenir"></font>
        </div>
      </td>

      <td>
        <div id="Game_Second_timer" style="z-index:50; position:absolute; top:440px; left:1195px; font-size:160px; font-family:'Avenir'; width:1080; color:#fff;">
          <font face="Avenir"></font>
        </div>
      </td>
    </tr>
  </table>
</div>

Answer 1

必须在计时器方法中检查 3 分钟，以便在每次滴答时进行检查。

//Start Game Timer
    SetGameTimer = setInterval(function() {

        GameTimer++;

        //get inidvidual value elements of the timer
        minutes = ('0' + Math.floor(GameTimer / 60)).slice(-2);
        seconds = ('0' + (GameTimer - minutes * 60)).slice(-2);

        //append timer to timer game elements
        $("#Game_Minute_timer").html(minutes);
        $("#Game_Second_timer").html(seconds);

        //Check Time value
        if (minutes < 3) {

            //Method call to check if button is pressed
            Interrupt_Game();

        } else if (minutes >= 3) {
            //Check on time, if more than 10mins, automatically navigate to last game page

            //Stop Counter
            clearInterval(SetGameTimer);

            alert("Game Over");
        }
    }, 1000);
}

否则它只会在游戏开始时检查一次。