带有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仅设置一次。 您应该重新评估逻辑，以将这些更改（更新和打印）包括在间隔中。