Дождитесь функции анимации в JavaScript

Question

У меня есть следующие методы в JavaScript:

Controller.prototype.changeScene = function (curScene, newScene) { 
    sf.scene.hide(curScene); 
    sf.scene.show(newScene, curScene); 
    sf.scene.focus(newScene); 
}; 

А в другой JS Класс:

Test.prototype.handleHide = function() { 
    alert("SceneDialog.handleHide()"); 
    $(".screenOverlay").fadeOut("slow"); 
    $(".dialogBox").fadeOut("slow"); 
}; 

sf.scene.hide() вызывает метод handleHide. В handleHide есть анимация, но она не показана. Контроллер не дождался завершения.

Я пробовал $.when(sf.scene.hide()).done() без везения.

Любые предложения?

Answer 1

Если вы используете функции анимации jquery, jquery обычно предоставляет параметр complete, который будет вызываться, когда функция будет завершена.

использованием fadeout:

$('#test').fadeOut('slow', function() { 
    // fadeout is finished!! do something 
}); 

Answer 2

Вы можете использовать JQuery queue, чтобы сохранить список анимаций, которые находятся в очереди происходит только после того, как предыдущая была завершена.

sf.scene.hide(curScene); 
sf.scene.show(newScene, curScene); 
sf.scene.focus(newScene); 

стал бы:

sf.scene.hide(curScene); 
sf.scene.queue(function() { 
    $(this).show(newScene, curScene); 
    $(this).dequeue(); 
}); 
sf.scene.queue(function() { 
    sf.scene.focus(newScene); 
    $(this).dequeue(); 
}); 

Answer 3

Вы можете использовать promise() функцию JQuery, чтобы вызвать функцию обратного вызова, когда все анимации закончены.

Попробуйте:

Test.prototype.handleHide = function (callback) { 
    $(".screenOverlay,.dialogBox").each(
     function(i) { 
      $(this).fadeOut("slow"); 
     } 
    ); 
    $(".screenOverlay,.dialogBox").promise().done(callback); 
}; 

И передать функцию обратного вызова в качестве аргумента handleHide. Ваша функция changeScene должна выглядеть так:

Controller.prototype.changeScene = function (curScene, newScene) { 
    sf.scene.hide(curScene, function() { 
     sf.scene.show(newScene, curScene); 
     sf.scene.focus(newScene); 
    }); 
};