当我的秒表使用 setInterval 更新时，它会闪烁，如何使其平滑？

Question

嗨，我在 javascript 中制作了一个秒表，每次它更新时都会删除，然后在一秒钟后再次出现并删除。所以每一秒它都会出现和消失，让它闪烁。我怎样才能让它出现直到下一秒更新，平滑过渡。

这是我的代码：

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 = 25;
    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, 100, 30);
    graph.fillText(gameTime, 100, 30);
  };

  this.update = function() {
    this.addTime();
    this.draw();
  }.bind(this);

  this.update();
}

var playerConfig = {textBorderSize: "1px", textColor: "black", textBorder: "solid"};
var canvas = document.getElementById("timer");
var graph = canvas.getContext("2d");
var gameTimer = new GameTimer();
setInterval(gameTimer.update, 1000);

<canvas id="timer" width="200" height="100"></canvas>

所以澄清一下，我尝试将间隔时间更改为十秒，每隔十秒它就会出现并消失，这意味着它会在接下来的十秒内消失，直到它再次出现并消失。它不会留在那里直到下一次更新。

谢谢！

Answer 1

我认为闪烁可能是setInterval 与屏幕刷新率不同步的结果。如果是这样，requestAnimationFrame也许可以解决这个问题。

这确实会占用不必要的系统资源，但无论如何都可以解决您的问题。

试试这个：

this.timeUntilUpdate = Date.now();
this.update = function(){
    if(Date.now() - this.timeUntilUpdate > 1000){
        this.addTime();
        this.draw();
    }
    requestAnimationFrame(this.update);
}

然后在最后将 setInterval(gameTimer.update, 1000); 替换为 requestAnimationFrame(GameTimer.update) 或者可能只是 GameTimer.update();

当我的秒表使用 setInterval 更新时，它会闪烁，如何使其平滑？

When my stopwatch updates with setInterval, it blinks, how to make it smooth?

html

javascript

stopwatch

setinterval