JS setIntervalを正しく機能させることができません

Question

JSでsetInterval（）メソッドの周りを頭で囲まれようとしています。演習として、私は花をたくさん生成しようとしています（今のところは長方形です）。私はこのように、連続して異なる位置での矩形を生成するのsetInterval（）を使用すると考えていた：

var c = document.getElementById("primeCanvas"); 
var ctx = c.getContext("2d"); 
var xOffset = 10; 

function generateFlower(x, y) { 
    "use strict"; 
    ctx.fillStyle = "#FF0000"; 
    ctx.fillRect(x + xOffset, y, 150, 100); 
} 

function addOffset(xPos) 
{ 
    "use strict"; 
    xOffset+=xPos; 
} 

setInterval(addOffset(50), 900); 

setInterval(generateFlower(10+xOffset,10), 1000); 

私は、スクリプトを実行したときただし、一つだけの四角形が同じ場所に表示されます（あるいはそれ以上の長方形がオンに表示されますが、互いの最上部）。 1秒間に1つの矩形が生成され、矩形のx位置（HTMLキャンバス内）に50が追加されました。

これはなぜ動作しないのですか？

Answer 1

命令setInterval(addOffset(50), 900);は、最初にaddOffset(50)を実行し、その後900ms後に実行するように結果をスケジュールします。

私はあなたがこの方法を実行する必要があるので、あなたは後900msからaddOffset(50)を実行するジョブをスケジュールしたいと思う：

let intervalId=setInterval(function(){addOffset(50);}, 900); 

INTERVALIDは、スケジュールジョブをキャンセルすることが重要です。