setInterval not working（Javascript）

Question

JavascriptでsetIntervalを使用して、キャンバスを定期的に再描画しようとしています。しかし、setInterval関数を呼び出すと、その関数に渡す関数は1回だけ実行されます。以下は私のコードを簡略化したものです：

<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> 

これはFirefox 54.0.1とGoogle Chrome Version 59.0でテストしました。なぜこれが機能しないのですか？キャンバスを定期的に再描画するコードを取得するにはどうすればよいですか？

Answer 1

関数呼び出しの結果ではなく、関数定義をsetIntervalメソッドに渡す必要があります。あなたのケースでは

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

、

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