Question

所以我是新来的，如果这是一个基本问题，请道歉，但我无法在其他任何地方看到答案。

我试图编写一个显示动画的webapp（使用pixijs），然后显示一个请求响应的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))

这个“currys”update_screen_objects函数通过部分应用一些参数。 .bind（context，arg1）的结果是一个函数，在调用时，只接受任何尚未绑定的参数，例如arg2，arg3等。

Answer 2

试一试。您基本上需要使用回调生成该步骤（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));

等待requestAnimationFrame完成（通过回调）

2 个答案: