Невозможно правильно настроить JS setInterval

Question

Попытка обернуть мою голову вокруг метода setInterval() в JS, поскольку я изучаю JS на данный момент. В качестве упражнения я пытаюсь создать много цветов (которые сейчас только прямоугольники). Я думал, что я мог бы использовать 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); 

Однако, когда я бегу сценарий только один прямоугольник появляется в том же месте (или, возможно, больше прямоугольников появляются, но на сверху друг друга). Цель заключалась в том, чтобы один прямоугольник генерировался в секунду, добавляя 50 к расположению x прямоугольника (в холсте HTML).

Может кто-нибудь понять, почему это не работает?

Answer 1

инструкция setInterval(addOffset(50), 900); сначала выполняет addOffset(50), затем планирует результат для выполнения через 900 мс после этого.

Я думаю, что вы хотите, чтобы запланировать запуск задания на addOffset(50) от 900ms после, так что вам нужно сделать так:

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

intervalId важно вам отменить задание по расписанию.