使用setInterval的Javascript Timer不工作？

Posted 2021-05-04

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了使用setInterval的Javascript Timer不工作？相关的知识，希望对你有一定的参考价值。

我有一个正在绘制的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);
}

谢谢。

答案

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>每1秒被调用一次，但看起来像addTime()线下的代码只执行一次。话虽这么说，你变量setInterval(addTime, 1000);只被设置一次。您应该重新评估您的逻辑，以便在您的间隔中包含这些更改（更新和打印）。

以上是关于使用setInterval的Javascript Timer不工作？的主要内容，如果未能解决你的问题，请参考以下文章