setInterval not working (Javascript)

Question

I'm trying to use setInterval in Javascript to redraw the canvas periodically. However, when I call the setInterval function, the function I pass to it only runs once. Here is a simplified version of my code:

<canvas id="myCanvas" width="400" height="400">
</canvas>
<script type="text/javascript">

function makeBoard()
{
    this.board=[["O", " ", " "], [" ", " ", " "], [" ", "X", " "]];
}

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
var ticTacToeBoard=new makeBoard();

var drawCanvas = new Function("printBoard", "");

drawCanvas = function(printBoard)
{
    alert("Calling draw function.");
    // drawing code
}

setInterval(drawCanvas(ticTacToeBoard), 10);
</script>

I've tested this on Firefox 54.0.1 and on Google Chrome Version 59.0. Why is this not working and how can I get my code to redraw the canvas periodically?

You're passing the returned result of calling drawCanvas(ticTacToeBoard) to setInterval() — Pointy
– Pointy, Commented Jul 6, 2017 at 21:18
Ah, I was not aware that setInterval worked that way. It's running fine now, thanks for the explanation. — CharType
– CharType, Commented Jul 6, 2017 at 21:47

nbkhope · Accepted Answer · 2017-07-06 21:23:09Z

3

You should pass a function definition to the setInterval method, not the result of a function call.

setInterval(function() {
  // Do something
}, 1000);

For your case,

setInterval(function() {
  drawCanvas(ticTacToeBoard);
}, 10);

answered Jul 6, 2017 at 21:23

nbkhope

7,5144 gold badges44 silver badges59 bronze badges

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

Collectives™ on Stack Overflow

setInterval not working (Javascript)

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related