ожидание завершения 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.
} 
}

javascript asynchronous jquery pixi.js requestanimationframe
person kaifresh    schedule 27.10.2014    source источник
comment
requestAnimationFrame не будет передавать аргументы в функцию   -  person markasoftware    schedule 27.10.2014
comment
Ваша вторая попытка вызывает функцию вместо передачи. Вместо этого передайте выражение функции, которое вызывает функцию update_screen_objects и передает ваш обратный вызов.   -  person Bergi    schedule 27.10.2014
comment
Можно пример вашего кода?   -  person Yoann    schedule 27.10.2014

Ответы (2)


arrow_upward
0
arrow_downward

Попробуйте это. В основном вам нужно сгенерировать эту функцию шага (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));
person hlfcoding    schedule 27.10.2014
comment
Спасибо приятель! Итак, чтобы полностью понять, что здесь происходит, используя функцию-оболочку generateAnimation (обратный вызов), она позволяет как step(), так и функции обратного вызова оставаться в пределах области видимости? - person kaifresh; 30.10.2014
comment
Правильный. По сути, чтобы перефразировать мой ответ, то, что вы хотели, хочет иметь версию step, которая вызывает callback, которую вы можете передать в rAF, а не вызывать step с callback и передавать результат этого вызова в rAF. - person hlfcoding; 30.10.2014
comment
Это очень неэффективно, вместо этого вы должны использовать ответ @NickSweeting - person sportzpikachu; 01.08.2020

arrow_upward
2
arrow_downward

Нет необходимости в сложной оболочке, просто выполните:

requestAnimationFrame(update_screen_objects.bind(window, response_phase_callback))

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

person Nick Sweeting    schedule 18.06.2017