Javascript Timer with setInterval not working?

Question

I have a Timer that is being drawn, but not changing at all. It shows 0: 01, and is not adding by the second. This probably has something to do with the setInterval, but i am not sure.

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);
}

Thanks.

All you are doing every 1000ms is adding 1 to a variable. You’re not redrawing anything. You would need to add your drawing code to the addTime function. — James
– James, Commented Dec 31, 2017 at 5:35

PaperMonoid · Accepted Answer · 2017-12-31 05:49:57Z

1

setInterval(addTime, 1000) calls addTime every second but nothing appears to happen because the timer is not being redrawn. You could redraw the timer by calling drawTimer, but all the timer data is inside the drawTimer function.

Calling drawTimer multiple times doesn't help either because all the values are being reseted on each call. You can solve this by using global variables and functions to manage the timer state (gameTimeMinutes, gameTimeSeconds and gameTime), but you probably want to use objects for this. You can read more about objects here.

In this example a GameTimer object is created. The GameTimer is defined by a function, it doesn't do anything until an object is created using the new keyword. Then you can addTime or draw by calling those functions on the object gameTimer.addTime(), gameTimer.draw(). Alternatively you can do both with the update function which is what happens with 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>

answered Dec 31, 2017 at 5:49

PaperMonoid

941 silver badge2 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Patrick Over a year ago

Fantastic! But one problem, every time the time updates, it blinks, making it almost ineligible. How can i remove that blinking and make a switch switch to the next time?

Patrick Over a year ago

I meant smooth switch in my previous comment*

PaperMonoid Over a year ago

I can't notice the blinking, although I think graph.clearRect(0, 0, canvas.width, canvas.height) might be causing the issue. It's a function that clears the canvas so that might explain the blinks. Maybe you could replace it with the fillRect function and just fill over the numbers.

Patrick Over a year ago

Hmm, its still blinking. Any other ideas?

Patrick Over a year ago

I tested it and if i speed up the interval then it blinks faster, which means that every time the interval plays, the text appears and then disappears, instead of appears until the next one plays. how can i make it appear until the next one plays/

Lucas Mota · Accepted Answer · 2017-12-31 03:38:19Z

0

The addTime() is being called every 1 second, but looks like the code bellow the line with setInterval(addTime, 1000); is only being executed once. That being said, you variable gameTime is only being set once. You should reevaluate your logic to include these changes(update, and print) on your interval.

answered Dec 31, 2017 at 3:38

Lucas Mota

1982 silver badges9 bronze badges

1 Comment

Patrick Over a year ago

Does that mean that i should set the interval another place in the code? Can you give me an example on how i can make it get executed multiple times?

Collectives™ on Stack Overflow

Javascript Timer with setInterval not working?

2 Answers 2

5 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related