javascript - 无法让 JS setInterval 正常运行

Question

因为我现在正在学习 JS，所以我正在尝试了解 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); 

但是，当我运行脚本时，只有一个矩形出现在完全相同的位置(或者可能会出现更多矩形，但彼此重叠)。目的是每秒生成一个矩形，将 50 添加到矩形的 x 位置(在 HTML Canvas 中)。

有人能明白为什么这不起作用吗？

Answer 1

指令setInterval(addOffset(50), 900);首先执行addOffset(50)，然后安排结果在900ms后执行。

我认为您希望安排一个作业在 900 毫秒后运行 addOffset(50)，因此您需要这样做:

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

intervalId 对于您取消计划作业很重要。