如何在浏览器同步 ajax 调用时显示等待消息? 我尝试了下面的代码,关闭了网络服务器,但没有显示“正在保存”消息。
一段时间后,只有来自 ajax 调用的错误事件发生,没有任何进度消息。
如果正在进行同步 ajax 调用,如何向用户显示等待消息?
var myInfo = '<div class="ui-state-highlight ui-corner-all" style="position: fixed;' +
'z-index: 10000; margin-top: 2%; margin-left: 2%">' +
' <br />' +
' <span class="ui-icon ui-icon-info" style="float: left; margin-right: .3em;"></span>' +
'<strong>Saving</strong> <br />' +
'<br /></div>'
$('#_info').html(myInfo);
$('#_info').show();
$.ajax( 'save',
{
async: false,
type: 'POST'
} );
最佳答案
您的问题是您使用的是同步 AJAX 调用,这几乎会锁定浏览器直到完成。特别是,在您点击 $.ajax({async:false})
之前,浏览器将无法显示您的“正在加载”消息。锁起来;例如,看看它做了什么:
请注意,当 AJAX 运行时,按钮甚至没有变回未点击的视觉状态?
解决方案是显示您的加载消息,将控制权交还给浏览器,然后通过同步远程调用锁定所有内容。一种方法是使用 setTimeout
延迟为零:
$('#_info').html(myInfo);
$('#_info').show();
setTimeout(function() {
$.ajax('save', {
async: false,
type: 'POST',
complete: function() {
$('#_info').hide();
}
});
}, 0);
例如:http://jsfiddle.net/ambiguous/zLnED/
当然需要注意一些 this
在 setTimeout
中不会相同回调,因为它在外面,但很容易处理。
使用 async:false
虽然这对您的用户来说不是一件好事,但您应该尽量避免这样做,除非绝对必要(而且很少有必要)。
关于javascript - 如何在浏览器中同步 ajax 调用期间显示等待消息,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/7301459/