从 Click Handler 更新 jQuery DOM

Question

我想显示一个 div，它在从点击处理程序调用 Ajax 更新时充当加载屏幕，这可能需要一两秒的时间，如下所示:

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

loading div 不显示。我怀疑这是因为在 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();
});