アニメーションフレームレンダリング後のjavascript実行機能

Question

私が理解したことに基づいて、アニメーションを滑らかに見せるためにアニメーションに60fpsが必要です。基本的に私がやろうとしているのは、フレームの開始時に重い計算を行うことです。レンダリングが実際に実行される時までに、残された作業はあまりありません。

私はwindow.requestAnimationFrameを使用して、画面を再描画する直前に関数を実行できることを理解しています。しかし、関数が長い時間がかかると、それはぎこちない効果を引き起こします。画面が再描画した直後に関数を実行する方法はありますか？

私はこのような何かが、そのミスを試してみましたが、ヒット：

window.requestAnimationFrame(do_before); 

do_before(){    
    window.setTimeout(do_after, 1); 
} 

do_after(){ 
    //code to execute after animation frame 
} 

あなたはdo_afterコード下の画像に表示できるように、まだ同じフレームで実行されており、このために、私は時々、長いフレームを取得します：

Link to image

画面が自身の描画を終了した後にdo_after（）の実行を作るための方法はありますか？事前に

おかげ

Answer 1

あり、あなたが欲しいものを行うにはAPI関数はありませんが、あなたは次の操作を行うことができます。

window.requestAnimationFrame(function() 
{ 
    do_before(); 
    window.requestAnimationFrame(do_after); 
}); 

これは確かになり、あなたのdo_after最初のアニメーションフレームの後に呼び出され、実行が完了した後にもう1つ起動します。