可以循环 setTimeout 以在每次运行时延迟循环吗？

Question

我的任务是在 html 画布中通过运动将圆圈移动到另一个方向。 我测试了循环，它可以工作，但时间太快了，根本没有运动。 所以我想延迟循环迭代。 但是在 for 循环中使用set-Timeout会使整个 for 循环延迟而不是单个迭代。

function Right(){
    for (var i = 1;i < 300; i++){
        setTimeout(function(){
            game.clearRect(0,0,800,600);
            game.beginPath();
            game.arc(x+i,y,20,0,2*Math.PI);
            game.stroke();
        },1000);
    }
}

Answer 1

使用间隔而不是创建 300 次必须留在内存中的超时。

var i = 1;
var myInterval = window.setInterval(function () {
  game.clearRect(0, 0, 800, 600);
  game.beginPath();
  game.arc(x+i, y, 20, 0, 2*Math.PI);
  game.stroke();
  i++
  if (i===300) window.clearInterval(myInterval);
}, 1000);

Answer 2

如果您能够使用async-await语法，您可以像这样完成它：

async function Right(){
    for (var i = 1;i < 300; i++){
        await new Promise(function(resolve) {
            setTimeout(function(){
                game.clearRect(0,0,800,600);
                game.beginPath();
                game.arc(x+i,y,20,0,2*Math.PI);
                game.stroke();
                resolve();
            },1000);
        });
    }
}

否则，请使用 epascarello 的答案中的间隔。