2

私は2つのajax呼び出しを非同期で行っています.各呼び出しで、このような読み込みダイアログボックスを表示しています.

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

各リクエストが成功すると、次のように読み込みダイアログを非表示にします。

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

ダイアログをロードするための私のhtmlコード：

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

最初のリクエストが完了すると、読み込みダイアログが消えるため、2 番目のリクエストでは読み込みダイアログが表示されません。

最初のリクエストから最後のリクエストが成功するまで読み込みダイアログを表示するようにコードを変更するにはどうすればよいですか。

4

4 に答える 4

5

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);
    }
});
于 2013-09-18T08:09:06.627 に答える
2

deferredを使用:

jQuery('#msg_writter').show();
var a = $.ajax(...);
var b = $.ajax(...); // the other call
$.when(a,b).always(function() {
    jQuery('#msg_writter').fadeOut(1000);
});
于 2013-09-18T08:08:19.720 に答える