无法让 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 对您取消计划作业很重要。

无法让 JS setInterval 正常运行

Can't get JS setInterval to function properly

html

javascript

jquery

dreamweaver