在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">

Answer 2

你可以这样做：

function send () {
	console.log('OK');
  setTimeout(send, 10000);
}

setTimeout(send, 1000);

setTimeout 函数的第一次运行在他运行console.log 和setTimeout 函数之后执行，内部有一个新的延迟:)