我想以一定的间隔在画布上绘图，但 setTimeout 不起作用

Question

这是代码中重要的部分：

function drawCircle(i, color1, color2) {
            var ctx = canvas.getContext("2d");
            if (i % 2 == 1) {
                ctx.fillStyle = color1;
            }
            else {
                ctx.fillStyle = color2;
            }
            ctx.beginPath();
            ctx.arc(110, 270, 10, 0, Math.PI * 2, true);
            ctx.closePath();
            ctx.fill();
        }
for (var i = 0; i < 10; i++) {
    setTimeout(drawCircle(i, color2, color5), 4000);
}

请注意，这只是我在更大的项目中使用与此类似的代码之前想要尝试的一个片段。这无法正常工作，图像仅绘制一次，也就是说，我只看到最后绘制的圆圈。我已经用谷歌搜索了这个，但到目前为止没有任何帮助我。

Answer 1

您要使用的是setInterval。 setTimeout 仅触发该事件一次。他们有相同的参数列表。

另外，我认为您使用 setTimeout 的方式不正确。按照您现在编写的方式，该函数在实际将任何内容传递给 setTimeout/setInterval 之前被触发。所以你应该写：

setInterval(function() {              // GOOD. An actual function is passed 
    drawCircle(...);                  // as the first argument.
}, 4000);

or:

setInterval('drawCircle(...)', 4000); // GOOD. the JS statement is supplied as 
                                      // a string and later on will be evaluated 
                                      // and executed with eval().

和 NOT:

setInterval(drawCircle(...), 4000);   // BAD! drawCircle() is fired, its result 
                                      // evaluated and passed on to setInterval 
                                      // that doesn't know what to do with it.

EDIT

你在 JavaScript 中没有任何阻塞例程。它是一种单线程、事件驱动的语言。如果您调用类似 setInterval 的方法，它会立即成功。仅在 4 秒左右后，您的回调函数才会被调用。然而与此同时，JS 将忙于做各种不同的事情 - 例如对用户生成的其他事件做出反应。您想要做的是调用 setTimeout 一次，然后在回调函数内部，在返回之前使用相同的函数和不同的 i 参数集再次调用它。沿着这些思路：

function drawCircle(i, ...) {

    // ... do stuff ...

    if (i < 10) {                    // Check if the callback has been invoked 10 
                                     // times already.
        setTimeout(function() {      // Schedule the callback for execution
            drawCircle(i + 1, ...);  // again after anoter 4 seconds.
        }, 4000);
    }
}

setTimeout(function() {              // Invoke the callback the first time 
    drawCircle(1, ...);              // after first 4 seconds.
}, 4000);

Answer 2

实际上有一些因素会导致代码行为不当，而这些因素都与循环的编写方式有关。第一个问题是对 setTimeout 的调用，主要是您没有将函数对象作为第一个参数传递给它，大多数人会通过执行以下操作来解决此问题：

for (var i = 0; i < 10; i++) {
    setTimeout(function() {
        drawCircle(i, color2, color5);
    }, 4000);
}

这将导致 setTimeout 按您的预期延迟，但是它将最终以 10 作为第一个参数调用 drawCircle 10 次，这是因为每次调用都使用对“i”变量的相同引用。在调用之前，不会检索 i 的值...当 i 已经是 10 时，循环完成后 4 秒左右。

为了解决这个问题，您还需要一个函数：

function getDrawer(i, color2, color5) {
    return function() {
        drawCircle(i, color2, color5);
    }
}

for (var i = 0; i < 10; i++) {
    setTimeout(getDrawer(i, color2, color5), 4000);
}

getDrawer （一个可怕的名字，请不要使用't use it) 函数会立即被调用，因此 i 的值会被立即访问并被 getDrawer 返回的匿名函数记住。 setTimeout 将调用该匿名函数。

Answer 3

这里的问题是您连续多次调用 setTimeout，而不是从回调中再次调用它。尝试将对 setTimeout 的调用移至 drawCircle 函数的末尾以查看动画。