Settimeout运行得很快

Question

我有一个while循环每秒调用一个函数：

function draw (){
        console.log(then-now)
    };
var i = 0
while(i < 100){
    setTimeout(draw,1000)
    i++;
};

但这不是在每次绘制调用之间等待一秒钟，而是一次调用100次。

Answer 1

尝试setInterval ：

function draw (){
    console.log(then-now)
    i++;
    if (i >= 100) clearInterval(interval);
};
var i = 0
var interval = setInterval(draw, 100);

如果要使用setTimeout ，则必须从draw函数本身内部设置下一个迭代。

function draw (){
    console.log(then-now)
    i++;
    if (i < 100) setTimeout(draw, 100);
};
var i = 0;
setTimeout(draw, 100);

这是因为setTimeout是异步的，因此while循环不会暂停-它会继续运行，几乎立即启动每个draw实例。

Answer 2

你好像要

while(i < 100){
    i++;
    setTimeout(draw, i*1000);
};

请注意， setTimeout为将来安排任务，但不等待-它立即返回，使您的代码异步。

但是，一次排队100个任务不是一个好习惯。 更好：

var i = 0;
function draw (){
    console.log(then-now)
    if (i<100) {
        i++;
        setTimeout(draw, 1000); // maybe adjusted to actual time
    }
};
draw();

Answer 3

setTimeout(draw, 1000);

应该：

setTimeout(draw, 1000 * (i + 1));

这样，每次创建的超时时间就会增加1s 。

在i + 1是，使得所述第一超时是1000 ，而不是0 ，如i开始于0 。