帶有setInterval的Javascript計時器不起作用？

Question

我有一個正在繪制的計時器，但根本沒有更改。 它顯示0：01，並且第二秒未加。 這可能與setInterval有關，但是我不確定。

function drawTimer() {
    var fontSize = 15;
    graph.lineWidth = playerConfig.textBorderSize;
    graph.fillStyle = playerConfig.textColor;
    graph.strokeStyle = playerConfig.textBorder;
    graph.miterLimit = 1;
    graph.lineJoin = 'round';
    graph.textAlign = 'right';
    graph.textBaseline = 'middle';
    graph.font = 'bold ' + fontSize + 'px sans-serif';

    var gameTimeMinutes = 0;
    var gameTimeSeconds = 1;
    var gameTime = "";

    function addTime() {
        gameTimeSeconds += 1;
    }

setInterval(addTime, 1000);

if (gameTimeSeconds < 10) {
    gameTime = gameTimeMinutes + " : 0" + gameTimeSeconds;
} else {
    gameTime = gameTimeMinutes + " : " + gameTimeSeconds;
}

if (gameTimeSeconds == 60) {
    gameTimeSeconds = 0;
    gameTimeMinutes++;
}

    graph.strokeText(gameTime, 50, 50);
    graph.fillText(gameTime, 50, 50);
}

謝謝。

Answer 1

setInterval(addTime, 1000) addTime調用一次setInterval(addTime, 1000)但由於未重繪計時器，因此似乎沒有任何反應。 您可以通過調用drawTimer重繪計時器，但是所有計時器數據都在drawTimer函數內部。

多次調用drawTimer也無濟於事，因為每次調用都將drawTimer所有值。 您可以通過使用全局變量和函數來管理計時器狀態（ gameTimeMinutes ， gameTimeSeconds和gameTime ）來解決此問題，但是您可能希望為此使用對象 。 您可以在此處閱讀有關對象的更多信息。

在此示例中，將創建一個GameTimer對象。 GameTimer由函數定義，在使用new關鍵字創建對象之前，它不會執行任何操作。 然后，您可以通過在對象gameTimer.addTime() ， gameTimer.draw()上調用這些函數來addTime或draw 。 另外，您也可以使用setInterval發生的update功能來實現這兩種功能。

 var canvas = document.getElementById("canvas"); var graph = canvas.getContext("2d"); var playerConfig = { textBorderSize: 3, textColor: "white", textBorder: "black" } function GameTimer() { var gameTimeMinutes = 0; var gameTimeSeconds = 0; var gameTime = ""; this.addTime = function() { gameTimeSeconds += 1; if (gameTimeSeconds < 10) { gameTime = gameTimeMinutes + " : 0" + gameTimeSeconds; } else { gameTime = gameTimeMinutes + " : " + gameTimeSeconds; } if (gameTimeSeconds == 60) { gameTimeSeconds = 0; gameTimeMinutes++; } }; this.draw = function() { graph.clearRect(0, 0, canvas.width, canvas.height); var fontSize = 15; graph.lineWidth = playerConfig.textBorderSize; graph.fillStyle = playerConfig.textColor; graph.strokeStyle = playerConfig.textBorder; graph.miterLimit = 1; graph.lineJoin = 'round'; graph.textAlign = 'right'; graph.textBaseline = 'middle'; graph.font = 'bold ' + fontSize + 'px sans-serif'; graph.strokeText(gameTime, 60, 50); graph.fillText(gameTime, 60, 50); }; this.update = function() { this.addTime(); this.draw(); }.bind(this); this.update(); } var gameTimer = new GameTimer(); setInterval(gameTimer.update, 1000); 

 <canvas id="canvas"></canvas> 

Answer 2

addTime()每隔1秒被調用一次，但是看起來像代碼在setInterval(addTime, 1000);行setInterval(addTime, 1000); 只執行一次。 話雖如此，您變量gameTime僅設置一次。 您應該重新評估邏輯，以將這些更改（更新和打印）包括在間隔中。