等待requestAnimationFrame完成（通過回調）

Question

所以我是新來的，如果這是一個基本問題，我深表歉意，但是我看不到其他任何答案。

我正在嘗試編寫一個顯示動畫（使用pixijs）的webapp，然后顯示一個div請求響應。 我的問題是，因為動畫是使用requestAnimationFrame處理的，所以動畫是異步發生的，因此響應和動畫階段是同時發生的（div會立即出現並模糊動畫）。

現在，我環顧四周，似乎已經同意使用回調函數，該回調函數僅在執行所有異步工作之后才觸發，從而允許進行串行執行。

但是，requestAnimationFrame采用以下形式

requestAnimationFrame（update_screen_objects） ，

但是當我嘗試這樣做時會中斷：

requestAnimationFrame（update_screen_objects（ response_phase_callback ））

顯然，requestAnimationFrame不喜歡傳遞本身具有回調的函數。 所以我的問題是：我應該對動畫循環執行什么操作，以確保在動畫完成后執行后續功能？

謝謝！

編輯

這是上述形式的無效代碼示例。

function animate(callback) {

var finished = false;

if ((new Date().getTime()) < adaptTime){
    runFlicker(false);
} else if ((new Date().getTime()) < judgeTime){
    hideAdaptors();
} else if ((new Date().getTime()) > judgeTime){
    stage.visible = false;          
    finished = true;                
}
renderer.render(stage);

if (!finished){
    requestAnimationFrame( animate(callback) ); //Ensures it will keep looping
    //requestAnimationFrame(animate); //This does work, but my issue still persists
} else {
    callback(); //By the time callback() is required, you can't access it as requestAnimationFrame doesn't accept animate() with a function passed to it.
} 
}

Answer 1

不需要復雜的包裝器，只需執行以下操作：

requestAnimationFrame(update_screen_objects.bind(window, response_phase_callback))

這通過部分應用一些參數來“ 咖喱 ” update_screen_objects函數。 .bind（context，arg1）的結果是一個函數，該函數在調用時僅接受尚未綁定的任何參數，例如arg2，arg3等。

Answer 2

試試看 基本上，您需要使用回調生成該step（ animate ）函數，而不是傳遞對animate的調用結果，后者是undefined 。

function generateAnimation(callback) {

  function step() {

    var finished = false;
    var now = (new Date()).getTime();

    if (now < adaptTime) {
      runFlicker(false);
    } else if (now < judgeTime) {
      hideAdaptors();
    } else if (now > judgeTime) {
      stage.visible = false;
      finished = true;
    }

    renderer.render(stage);

    if (!finished) {
      requestAnimationFrame(step);
    } else {
      callback();
    }

  }

  return step;

}

// Usage:
requestAnimationFrame(generateAnimation(callback));