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();
     }
 });