Ajax complete在成功之前就被解雇了，如何防止這種行為呢？

Question

我有一個AJAX請求，該請求獲取插入到DOM中的HTML塊。 發生這種情況時，我正在顯示微調器加載gif。

我希望微調器在從ajax請求接收的數據插入DOM的確切時間隱藏。

問題在於，在HTML實際插入DOM 之前 ，javascript開始執行完整的部分。 因此，對於最終用戶，微調框消失了，過了一會兒，DOM彈出了。

 $('#mySpinner').show();
 $.ajax({
     success: function(data) {
         $('#myElement').html(data);
     },
     complete:(){
         $('#mySpinner').hide(); // This is called when the success part is still executing
     }
 });

編輯：我並不是說完成是成功之前被解雇的。 我的意思是說，在成功准備就緒之前，必須先完成工作。 因此，發生的順序是：

1. 成功被稱為
2. $('#myElement').html(data); 叫做
3. 完成稱為
4. $('#mySpinner').hide()被稱為
5. $('#mySpinner').hide()完成
6. $('#myElement').html(data); 完成了

Answer 1

然后執行以下操作：

$('#mySpinner').show();
$.ajax({
    success: function(data) {
     $('#myElement').html(data);
     $('#mySpinner').hide();
 }

});

但是您描述的行為並不與jQuery Doc內聯，因為complete的行為僅應在success和error之后發生……您可以在jsFiddle中重現此錯誤行為嗎？ 可能是問題出在其他地方...

Answer 2

html()同步運行，但是當執行下一條語句時，瀏覽器仍然可以呈現。 您可以嘗試添加一個簡單的setTimeout，以使瀏覽器有時間顯示添加的內容：

$('#mySpinner').show();
$.ajax({
    success: function(data) {
        $('#myElement').html(data);
        setTimeout(function() {
            $('#mySpinner').hide();
        }, 0);
    },
    error: function() {
        $('#mySpinner').hide();
    } 
});

另一個選擇是將特定元素添加到添加的html中，並且僅在該元素存在時才繼續：

function waitForDom(el, cb) {
    if ($(el).length) {
        $(el).remove();
        cb();
        return;
    }

    setTimeout(function() {
        waitForDom(el, cb);
    }, 10);
}

$('#mySpinner').show();
$.ajax({
    success: function(data) {
        $('#myElement').html(data + '<div id="waitForDom"></div>');

        waitForDom("waitForDom", function() {
            $('#mySpinner').hide();
        });
    },
    error: function() {
        $('#mySpinner').hide();
    } 
});

Answer 3

您可以簡單地將微調器隱藏在ajax代碼的成功部分中：

$('#mySpinner').show();
 $.ajax({
     success: function(data) {
         $('#myElement').html(data);
         $('#mySpinner').hide();
     }
 });