オブジェクトを描画するときのJavaScript forループの問題

Question

何とか私の研究をして、JavaScriptがシングルスレッドであることが分かった！ 私は、JavaScriptを使ってfor loopでアニメーションを作る方法を解明しようとしてきました。

これまで私が行ってきたことです。 JavaScriptを使用してキャンバスにオブジェクトを描画しようとしています。ループを実行すると、ステップバイステップでは実行されません。ループを実行して10回ではなく1回描画し、タイムアウト機能を無視します。

は、単一のインスタンスでは、（P/Sを描いた私は私はcontext.clearRect(0, 0, context.canvas.width, context.canvas.height);を除去し、それをテストした複数バージョンの原因無視：

JS：

// down button click 
    down.onclick = function() { 
     if (!imgLoaded) return; 
     flag=false; 
     setTimeout(function() { 
    for(var i = 0; i < 15 ; i++) { 
    posY += 10; 
    context.drawImage(img, posX, posY); 
    }}, 9); 
    // call next step 

Answer 1

ですsetTimeoutが動作する方法ではありません。あなたが書き込んだ方法では、setTimeoutは最初のパラメータを9ミリ秒後に1回呼び出し、遅延なしでループします。

定期的に呼び出す場合は、setInterval関数を使用できます（15回目の反復後にRemoveIntervalを忘れないでください）。

両方の場合（setTimeout、setInterval）、指定された遅延は唯一の指標であることに注意してください。

ブラウザでアニメーションを行う通常の方法であるWindow.requestAnimationFrame()機能を使用します。