jQuery - Как заставить операторы выполняться только после завершения предыдущих операторов?

Question

Например, я использую параметр beforeSend в функции $ .ajax.В приведенном ниже примере кода функция .html будет выполняться, пока в выражении ранее происходило затухание.Как я могу остановить это поведение?

 jQuery("#container").fadeOut("slow", function() {
     jQuery("#container").removeClass('error');
 });

 jQuery("#container").html("success").fadeIn("slow");

Так что же происходит, когда во время затухания, jquery будет вводить html «успех».Я хочу, чтобы это произошло после завершения анимации.

Как мне это сделать?

Спасибо!

Answer 1

Использовать обратный вызов ...

jQuery("#container").fadeOut("slow", function() {
  // At this point, animation is complete, and the element is invisible
  jQuery(this).removeClass("error").html("success").fadeIn("slow");
});

Answer 2

Если вы используете это в контексте с вызовом ajax, то я ожидаю, что последний код будет частью вашего успешного обратного вызова, а не в соответствии с исчезновением контейнера. Это сделает контейнер скрытым перед вызовом и покажет его только после успешного возврата вызова. Возможно, вы захотите разделить его так, чтобы исчезновение завершилось, чтобы вы могли сделать это независимо от того, успешен вызов или нет.

jQuery.ajax({
   ...
   beforeSend: function() {
                   jQuery("#container").fadeOut("slow", function() {
                       jQuery("#container").removeClass('error'); }
                   });
               },
   success:    function(data) {
                   jQuery("#container").html("success").fadeIn("slow");
               }
   ...
});


jQuery.ajax({
   ...
   beforeSend: function() {
                   jQuery("#container").fadeOut("slow", function() {
                       jQuery("#container").removeClass('error'); }
                   });
               },
   success:    function(data) {
                   jQuery("#container").html("success");
               },
   error:      function(req,status) {
                   jQuery("#container").html("error").addClass("error");
               },
   complete:   function() {
                   jQuery("#container").fadeIn();
               }
});

Answer 3

Я использую плагин jQuery FxQueues 2.0