Ожидание завершения requestAnimationFrame (с помощью обратных вызовов)

Так что я новичок здесь, извиняюсь, если это основной вопрос, но я не вижу ответа на него где-либо еще.

Я пытаюсь написать веб-приложение, которое показывает анимацию (используя 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.
} 
}
Источник

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(update_screen_objects.bind(window, response_phase_callback))

Это " currys" функция update_screen_objects путем частичного применения некоторых аргументов. Результатом.bind(context, arg1) является функция, которая при вызове принимает только те аргументы, которые еще не связаны, например, arg2, arg3 и т. Д.

Источник
Другие вопросы по тегам