Question

我试图在循环中延迟执行脚本。在审查了多个查询和答案后，我对信息感到不知所措，似乎无法解决问题。徘徊在相对于＆＃39; setInterval＆＃39;和＆＃39; setTimeout＆＃39;的答案在我看来，＆＃39; setTimeout＆＃39;是实现所需延迟的适当方法。

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

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

代码如下：

＆＃13;

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();
                }
            }
        }
    }
}

＆＃13;

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

＆＃13;

Answer 1

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

如果我理解正确的方法，例如'暂停'，那么在其他语言中找到的'wait'等将无法正常工作，因为它会锁定浏览器，直到超时结束。

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函数，内部有一个新的延迟:)

在javascript

2 个答案: