javascript 如何在浏览器中同步ajax调用期间显示等待消息
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7301459/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to show waiting message during sync ajax call in browser
提问by Andrus
How to show waiting message on sync ajax call in browser ? I tried code below, turned web server off but "Saving" message is not displayed.
如何在浏览器中显示同步 ajax 调用的等待消息？我尝试了下面的代码，关闭了 Web 服务器，但未显示“正在保存”消息。
After some time only error event from ajax call occurs, without any progress message.
一段时间后，仅发生来自 ajax 调用的错误事件，没有任何进度消息。
How to show waiting message to user if sync ajax call is in progress ?
如果同步 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'
} );
回答by mu is too short
Your problem is that you're using a synchronous AJAX call and that pretty much locks up the browser until it completes. In particular, the browser won't be able to show your "loading" message before you hit the $.ajax({async:false})lockup; for example, watch what this does:
您的问题是您使用的是同步 AJAX 调用，并且在浏览器完成之前几乎会锁定浏览器。特别是，浏览器将无法在您$.ajax({async:false})锁定之前显示您的“正在加载”消息；例如，看看这是做什么的：
Notice that the button doesn't even change back to the unclicked visual state while the AJAX is running?
请注意，当 AJAX 运行时，按钮甚至没有变回未单击的视觉状态？
The solution is to show your loading message, hand control back to the browser, and then lock everything up with your synchronous remote call. One way to do this is to use setTimeoutwith a delay of zero:
解决方案是显示您的加载消息，将控制权交还给浏览器，然后使用同步远程调用锁定所有内容。一种方法是使用setTimeout延迟为零：
$('#_info').html(myInfo);
$('#_info').show();
setTimeout(function() {
$.ajax('save', {
async: false,
type: 'POST',
complete: function() {
$('#_info').hide();
}
});
}, 0);
For example: http://jsfiddle.net/ambiguous/zLnED/
例如：http: //jsfiddle.net/ambiguous/zLnED/
Some care will be needed of course as thiswon't be the same inside the setTimeoutcallback as it was outside but that's easy to take care of.
当然需要一些注意，因为回调this内部与setTimeout外部不同，但这很容易处理。
Using async:falseisn't a very nice thing to be doing to your users though, you should try to avoid it unless it is absolutely necessary (and it rarely is).
但是，使用async:false对您的用户来说并不是一件很好的事情，除非绝对必要（而且很少是），否则您应该尽量避免它。
回答by Samich
<div class="loading">Loading...</div>
<div class="loading">Loading...</div>
Your ajax call:
你的 ajax 调用：
$('.loading').fadeIn(50, function() {
$.ajax( 'save',
{
async: false,
type: 'POST'
} );
});
$('.loading').fadeOut(50);
