jquery - 来自 Click 处理程序的 jQuery DOM 更新

Question

当从单击处理程序调用 Ajax 更新时，我想显示一个div用作加载屏幕的加载屏幕，这可能需要一两秒钟，例如：

var loadingControl;

loadingControl = $("#loading"); // Is initialized after DOM Ready

$('#updateLink').click(function (e) {
    loadingControl.show();
    $.ajax(
    {
        url: 'http://some.url',
        type: "POST",
        success: function (data) {
            $('#divToUpdate').html(data);
        },
        error: handleAjaxError
    });

    loadingControl.hide();

    e.preventDefault();
});

loadingdiv 不显示。click我怀疑这是因为 DOM 在处理程序完成之前不会更新。那是对的吗？

如何重构此代码以允许 DOM 在调用后更新.show()，以便在运行时加载屏幕div可见.ajax？

Answer 1

ajax 调用是异步的，所以代码继续运行。因此，您的loadingControl.hide()函数在 ajax 启动后立即被调用，请尝试loadingControl.hide();在函数内部移动success。

$('#updateLink').click(function (e) {
    loadingControl.show();
    $.ajax(
    {
        url: 'http://some.url',
        type: "POST",
        success: function (data) {
            $('#divToUpdate').html(data);
            loadingControl.hide();
        },
        error: handleAjaxError
    });


    e.preventDefault();
});