Question

我有一个ajax loader gif应该在ajax调用被触发之前显示并隐藏在ajax完成上，但是该元素没有显示出来。

如果我使用inspect进行调试并逐步运行，则会显示该元素。

    $("#ajaxLoader").show();
    $('.spn-invalid-zip').hide();
    $("#txtZipCode").removeClass("input-validation-error-style");
    if ($("#inValidZipCode").length <= 0) {
        $($('#txtZipCode').parent()).append("<span id='inValidZipCode' class='spn-invalid-zip input-validation-error-style'></span>");
    }
    var valZipCode = value;
    if (valZipCode.length < 5) {
        resetCountyFields();
        return false;
    }
    var zipCodeResult = false;
    $.ajax({
        url: path,
        type: "POST",
        data: { zipcode: valZipCode },
        async: false,
        success: function (data) {
            ....
        },
        complete: function () {
            $("#ajaxLoader").hide();
        }
    });

Answer 1

问题是因为您在AJAX调用中使用async: false。这会阻止浏览器的UI线程在请求传输过程中更新，因此您显示/隐藏的图像永远不会在用户屏幕上更新。如果从AJAX选项中删除该属性，您的代码将正常工作：

$("#ajaxLoader").show();

// your logic here:

$.ajax({
    url: path,
    type: "POST",
    data: { zipcode: valZipCode },
    success: function (data) {
        ....
    },
    complete: function () {
        $("#ajaxLoader").hide();
    }
});

将async属性设置为false用于使请求同步，这样您就不需要使用回调函数来检索请求中的数据，这样UI就不会更新，直到请求结束。这是非常糟糕的做法，并且控制台将警告您使用它，因为浏览器将向用户显示它已挂起，直到请求完成，这可能是几秒钟不活动。

它仅适用于在UI更新之前完成代码的某些情况，例如onbeforeunload。除此之外，你永远不应该使用它。

在jQuery ajax调用之前未显示的元素

1 个答案: