为何这段JavaScript代码无法每隔一秒绘制随机位置、半径递增的圆形？

核心问题：定时器触发时间一致 #

你写的for循环里，五个setTimeout(draw, 1000)会在**同一时间（页面加载后1秒）**全部触发，而非每隔一秒执行一次。因为循环会瞬间完成，所有定时器的延迟都设为1000毫秒，导致五个圆形几乎同时被绘制，视觉上完全达不到“每秒一个递增圆”的效果。

次要问题：count变量的递增时机 #

由于五个draw函数几乎同时执行，count++会在极短时间内连续累加，虽然最终半径数值是递增的，但因为绘制时间重叠，无法体现出“每秒一个、半径逐步变大”的预期效果。

修复后的代码 #

<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
<canvas id="myCanvas" width="400" height="400" style="border:1px solid #000000;"></canvas>
<script>
var count = 0;
// 提前获取canvas和上下文，避免重复DOM查询
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");

function getRandomInt(max) {
    return Math.floor(Math.random() * max);
}

function draw() {
    ctx.beginPath();
    ctx.arc(getRandomInt(400), getRandomInt(400), 5 * count++, 0, 2 * Math.PI);
    ctx.fillStyle = "green";
    ctx.fill();
}

// 给每个定时器设置不同延迟：i*1000，实现间隔触发
for (var i = 0; i < 5; i++) {
    setTimeout(draw, i * 1000);
}
</script>
</body>
</html>

关键修改点 #

• 将定时器延迟改为i * 1000，让第一个定时器0秒后执行，第二个1秒后，第三个2秒后……以此类推，实现每隔一秒绘制一个圆。
• 提前获取canvas元素和绘图上下文，避免每次draw都重复查询DOM，小幅提升性能。

内容的提问来源于stack exchange，提问作者ofey