javascript - Settimeoutは高速で実行されています

Question

毎秒関数を呼び出すwhileループがあります：

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

しかし、これは描画する各呼び出しの間に1秒待つのではなく、一度に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になるようにするためです。i0