イベントループを処理できるように、requestAnimFrameをアプリケーションループで 'eime'を検討できますか?
-
21-12-2019 - |
質問
JavaScriptのrequestAnimFrame
メソッドプログラムのメインループ内でキャンバスを更新してください。
window.requestAnimFrame = (function(callback) {
return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame ||
function(callback) {
window.setTimeout(callback, 1000 / 60);
};
})();
function animate() {
requestAnimationFrame( animate );
//var runcount = 100;
//for (var i=0;i<=100;i++) {
draw();
// if (runcount === i)
// alert("Completed program loop");
// }
}
.
何が起こっていたのは、メインループが100 の間実行された後にキャンバスを更新した後のキャンバスのみを更新したマイプログラムを更新したことでした。反復してから止めました。 上のメインループに追加した後、突然私のプログラムのすべてのループでcanvas updates が得られます。
キャンバスが完成したまで更新されなかったという事実は、CANVASの更新が優先されなかったさまざまなスレッドで実行されていたと思います。 (しかし、 JavaScriptはシングルスレッド)です。
私の質問は - イベントループを処理するためにrequestAnimFrameを 'eight'と検討することができますか?まだJavaScriptがシングルスレッド?
解決
あなたはあなたがあなたの反復の1000回の方法について特有のものではありませんが、for
またはwhile
ループを使用して繰り返したことを意味します(?間違っている場合は正しい場合は訂正してください)。
whileループを実行すると、スクリプトはそのループ(またはスコープ)が完了するまでビジーループになります。 JSがシングルスレッドを知っているので、それがこれを行っている間にイベントキューなどのものを処理することはできません - ループが終了するまで(一般的に言えば、ブラウザが特定されるかもしれません)ことはできません。 DOMの更新が個別のスレッドで実行されている場合は、DOMの更新を許可する実装ですが、これはJSから別のものです。
今すぐRAFを実装しているので、枠ごとに単一の反復を行っています。つまり、ブラウザは、ループ内で処理したコードが同じシナリオを作成している間にビジーループを実行していない限り、ブラウザがイベントキュー非同期的に(マルチスレッドと同じではない)を処理する時間を持っています。最初の
setTimeout
を使用した可能性があります。たとえば、setTimeout
またはsetInterval
とは異なるRAFが異なる点は、モニタの vblank 期間(ビデオカードがVsyncと呼ばれるオプションを介してスレーブする垂直ブランキング) - 単語の単語では、モニタのリフレッシュレート(通常は60 Hz)を意味します。これにより、スムーズ(ER)アニメーションを作成できます。これが主に行われたものとして、リクエスト*アニメーション*フレームと呼ばれる理由です。
はJSはまだシングルスレッドですか?はい、これは変わりません(JSでマルチスレッドを実現する唯一の方法はWeb Workersを使用することで)。
RAFは何でも変わりますか?この分野ではありません - それはsetTimeout
のより正確で公演された代替手段であり、それは異なって同期していますが、それだけです。スコープがビジーである場合は、setTimeout
と同じ制限が発生しません(したがって保証を示唆していない名前のrequest
*)が、それがトリガーを実行するとモニタのリフレッシュレートと同期しています。< / P>