javascript - 在javascript中实现延迟

Question

我试图在循环中延迟脚本的执行。在查看了多个问题和答案后，我被信息淹没了，似乎无法整理出来。浏览与“setInterval”和“setTimeout”相关的答案，在我看来，“setTimeout”是实现所需延迟的适当方法。

我想要做的是让一个循环绘制一组线并返回到循环的开头，它将等待一段定义的时间(大约 250 毫秒 - 1000 毫秒)，然后删除屏幕，增加值设置绘制一条线的位置并在新位置绘制下一条线。

使用 Firefox 的调试器单步执行代码，可以观察到该过程的发生。但是，当代码在调试器外部执行时，会发生延迟，并且只会绘制代码最后一次增量的行。关于我做错了什么有什么建议吗？提前致谢。

代码如下:

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.fillStyle = "#ffffff";
scrndrw();

function scrndrw() {
    for (var angle = 1; angle < 361; angle++) {
        setTimeout(scrndrwdel(), 1000);

        function scrndrwdel() {
            ctx.fillRect(0, 0, 600, 600);
            ctx.beginPath();
            ctx.moveTo(300, 300);
            ctx.lineTo((((Math.cos(angle * (Math.PI / 180))) * 250) + 300), (((Math.sin(angle * (Math.PI / 180))) * 250) + 300));
            ctx.lineWidth = 1;
            ctx.strokeStyle = "#000000";
            ctx.stroke();
            ringdraw();

            function ringdraw() {
                for (var i = 1; i <= 5; i++) {
                    ctx.beginPath();
                    ctx.arc(300, 300, (50 * i), 0, 2 * Math.PI);
                    ctx.lineWidth = 3;
                    ctx.strokeStyle = "#000000";
                    ctx.stroke();
                }
            }
        }
    }
}

<canvas id="myCanvas" width="600" height="600">

Answer 1

在查看了各种推荐的站点后，很明显最简单的方法是使用“setInterval”。代码被重写如下所示。代码运行，绘制屏幕，​​并等待直到它被“setInterval”再次触发。代码被触发以每 2 毫秒重新运行一次。

如果我理解正确，其他语言中的“暂停”、“等待”等方法将不起作用，因为它会锁定浏览器直到超时结束。

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var angle = 0;
ctx.fillStyle = "#ffffff";

draw_line();
setInterval(draw_line, 2);

function draw_line() {
    ctx.fillRect(0, 0, 600, 600);
    ctx.beginPath();
    ctx.moveTo(300, 300);
    ctx.lineTo((((Math.cos(angle * (Math.PI / 180))) * 250) + 300), (((Math.sin(angle * (Math.PI / 180))) * 250) + 300));
    ctx.lineWidth = 1;
    ctx.strokeStyle = "#00ff00";
    ctx.stroke();

    // ctx.arc(150, 150, 10, 0, 2*Math.PI);
    // ctx.strokeStyle = "#ff0000";
    // ctx.stroke();

    if (angle < 360) {
        angle = angle + 0.25;
    } else {
        angle = 0;
    }

    for (var i = 1; i <= 5; i++) {
        ctx.beginPath();
        ctx.arc(300, 300, (50 * i), 0, 2 * Math.PI);
        ctx.lineWidth = 1;
        ctx.strokeStyle = "#00ff00";
        ctx.stroke();
    }
}

<canvas id="myCanvas" width="600" height="600">