Question

我知道此问题之前已得到解答，但其他答案似乎都没有解决我的问题。我有一个计时器函数，在调用时，应该使用setInterval每秒运行5秒然后停止。这个工作一次，但clearInterval似乎没有工作，因为倒计时循环的后半部分一直在运行。我觉得这是一个范围错误，但我尝试在函数外移动setInterval和clearInterval而没有运气。这是我的代码 - 点击按钮调用此函数：

var startGame = function(){
  var count = 5;

  var countdownTimer = function(){
    setInterval(countdown, 1000);
  };

  var countdown = function(){
    if (count > 0){
      console.log('inside counter loop');
      count--;
      $('.timer').text('0:' + count);
    } else {
        clearInterval(countdownTimer);
        console.log('inside endGame loop');
        //endgame(); //This should run once when the timer reaches 0.
     }
  };

    countdownTimer();

};

现在，循环将正确运行一次，然后在endGame循环中调用console.log＆＃39;每一秒都没有重置。我希望循环运行一次，停止，然后等待重新启动，直到on click handler再次调用该函数。

Answer 1

setInterval()会返回您需要存储的时间间隔ID，并将其用于clearInterval()

var startGame = function() {
    var count = 5;
    var intervalID ;
    var countdownTimer = function() {
        //Store the intervalID 
        intervalID = setInterval(countdown, 1000);
    };
    var countdown = function() {
        if (count > 0) {
            console.log('inside counter loop');
            count--;
            $('.timer').text('0:' + count);
        } else {
            if (intervalID) {
                //Pass currect pointer
                clearInterval(intervalID);
            }
        }
    };
    countdownTimer();
};

SetInterval / ClearInterval循环无法正常运行

1 个答案: