Question

我有一个AJAX请求，它获取我插入DOM的一大块HTML。在发生这种情况时，我正在显示一个旋转器加载gif。

我希望微调器在从ajax请求接收的数据插入DOM的同时隐藏。

问题是javascript开始执行之前的，实际上是将HTML插入到DOM中。因此对于最终用户而言，微调器消失了一段时间后，DOM弹出。

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

编辑：我并不是说在成功之前就完成了。我说在完成准备之前，完全被解雇了。所以发生的事情的顺序是：

成功被称为

$('#myElement').html(data);被称为

完成称为

$('#mySpinner').hide()被称为

$('#mySpinner').hide()已完成

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

成功准备就绪之前会激活Ajax，如何防止这种行为？

3 个答案: