Question

我正在制作一个带有计时器的游戏。

我想做的是-当游戏通过gameState.init()开始时，计时器通过timer.counter("start")开始时-但是当点击“重新启动”按钮时，计时器停止并重置通过timer.counter("reset")。

计时器的确重置为0，但仍在继续计数且未清除。

感谢我能获得的任何见解。预先感谢！

var gameState = {
    init: function(){
        var difficultyLevel = document.querySelector('input[name="level"]:checked').value;
        conditions.difficulty(difficultyLevel);
        startFrame.classList.remove("active");
        shuffleCards();
        timer.counter("start");
        display.moves(movesAllowed);
    },
    restart: function(){
        startFrame.classList.add("active");
        reset.allCards(cards);
        shuffleCards();
        timer.counter("reset");
        matchCount = 0;
        totalMoves = 0;
        movesAllowed = 0;
        timeAllowed = 0;
        time = 0;
    }
}

var timer = {
    counter: function(status){
        var clock = document.querySelector(".timer");

        var incrementTime = setInterval(function(){
                time++;
                var minutes = Math.floor(time / 60);
                var seconds = Math.floor(time % 60);
                if(seconds < 10){
                    clock.innerText = minutes + ":0" + seconds;
                } else {
                    clock.innerText = minutes + ":" + seconds;
                }
            }, 1000);

        var stopTime = function(){
            clearInterval(incrementTime);
        }

        if(status === "start"){
            alert("counting");
        }

        if(status === "reset"){;
            alert("reset");
            stopTime();
        }
    }
}

Answer 1

两个问题：

保存间隔incrementTime的变量是counter函数的局部变量。 counter函数结束后，incrementTime将被垃圾回收，因为不再保留对间隔的引用。您需要将interval变量保持为 persistent 。

您要设置一个每次 counter的新间隔。您可能应该只在status为start时设置一个时间间隔，否则旧的时间间隔将继续运行并且不会停止（重新分配分配给setInterval的时间间隔不会清除间隔）：

let interval; // <---- Persistent
var timer = {
  counter: function(status){
    var clock = document.querySelector(".timer");
    if (status === 'start') {
      interval = setInterval(() => { // <---- Assign to persistent variable
        time++;
        var minutes = Math.floor(time / 60);
        var seconds = Math.floor(time % 60);
        if(seconds < 10){
          clock.innerText = minutes + ":0" + seconds;
        } else {
          clock.innerText = minutes + ":" + seconds;
        }
      }, 1000);
      alert("counting");
    } else if(status === "reset"){
      var stopTime = function(){
        clearInterval(interval); // <---- Clear persistent variable
      }
      alert("reset");
      stopTime();
    }
  }
}

（stopTime和interval函数是持久的，而不是每次都需要重新创建时，它会更优雅；例如，您可以将它们分配给{{ 1}}）

Javascript-间隔未清除

1 个答案: