Question

我有一个正在绘制的Timer，但根本没有改变。它显示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但似乎没有任何事情发生，因为计时器没有被重绘。您可以通过调用drawTimer重绘计时器，但所有计时器数据都在drawTimer函数内。

多次调用drawTimer也无济于事，因为每次调用都会重置所有值。您可以通过使用全局变量和函数来管理计时器状态（gameTimeMinutes，gameTimeSeconds和gameTime）来解决这个问题，但您可能想要使用对象为此。您可以阅读有关对象here的更多信息。

在此示例中，创建了一个GameTimer对象。 GameTimer由函数定义，在使用new关键字创建对象之前，它不会执行任何操作。然后，您可以通过调用对象addTime，draw上的这些函数gameTimer.addTime()或gameTimer.draw()。或者，您可以使用update函数执行这两项操作，setInterval。

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

每1秒调用addTime()，但看起来像setInterval(addTime, 1000);行的代码只执行一次。话虽如此，变量gameTime只被设置一次。您应该重新评估您的逻辑，以便在您的时间间隔内包含这些更改（更新和打印）。

使用setInterval的Javascript Timer不工作？

2 个答案: