从点击处理器

Question

jQuery的DOM更新我想显示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不显示。我怀疑这是因为DOM不会更新，直到click处理程序完成。那是对的吗？

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

Answer 1

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

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