шоу для запроса многократной АЯКС

Question

Я делаю два Ajax вызова асинхронно, при каждом вызове я показываю диалоговое загрузка окна, как это,

jQuery('#msg_writter').show(); 

на успех каждого запроса я скроет диалоговое окно загрузки, как это,

jQuery('#msg_writter').fadeOut(1000); 

мой HTML-код для диалога загрузки:

<div id="msg_writter" class="msgWritter">  
    <img src="/images/loading.gif"/> 
</div> 

, когда первый запрос завершается, диалог загрузки исчезает, поэтому диалог загрузки не отображается для второго запроса.

Как я могу изменить код, чтобы показать диалог загрузки с первого запроса до успешного последнего запроса.

Answer 1

Вы должны рассчитывать подсчет запросов AJAX:

var activeAjaxCount = 0; 

// When making request, increment count and show loader 
activeAjaxCount++; 
jQuery('#msg_writter').show(); 

// On complete callback, decrease count and fadeout loader if count is zero 
activeAjaxCount--; 
if (activeAjaxCount == 0) { 
    jQuery('#msg_writter').fadeOut(1000); 
} 

Вы также можете использовать $.ajaxStart и $.ajaxComplete для решения этой проблемы в глобальном масштабе.

var activeAjaxCount = 0; 

$(document).ajaxStart(function() { 
    activeAjaxCount++; 
    $('#msg_writter').show(); 
}); 

$(document).ajaxComplete(function() { 
    activeAjaxCount--; 
    if (activeAjaxCount == 0) { 
     jQuery('#msg_writter').fadeOut(1000); 
    } 
}); 

Answer 2

Вы можете сделать:

var test1 = false; 
var test2 = false; 

var onSuccessAjax1 = function() { 
    test1 = true; 
    if (test1 && test2) { 
     //hide loading animation 
    } 
} 

var onSuccessAjax2 = function() { 
    test2 = true; 
    if (test1 && test2) { 
     //hide loading animation 
    } 
} 

вы должны вызвать onSuccessAjax функции, когда ваш Ajax вызов завершается с успехом

Answer 3

Использование deferred:

jQuery('#msg_writter').show(); 
var a = $.ajax(...); 
var b = $.ajax(...); // the other call 
$.when(a,b).always(function() { 
    jQuery('#msg_writter').fadeOut(1000); 
});