jQuery ajax 调用前未显示元素

Question

我有一个 ajax 加载器 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 线程在请求传输过程中进行更新，因此您 show/hide 的图像永远不会在用户屏幕上更新。如果您从 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 调用前未显示元素

Element not shown before jQuery ajax call

ajax

jquery

show