javascript - 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。