如何在浏览器中的同步ajax调用期间显示等待消息

Question

如何在浏览器中的同步ajax调用中显示等待消息？我在下面尝试了代码，关闭了Web服务器，但未显示“正在保存”消息。

一段时间后，只会发生来自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 />' +
    '&nbsp;<span class="ui-icon ui-icon-info" style="float: left; margin-right: .3em;"></span>' +
    '<strong>Saving</strong>&nbsp;<br />' +
    '<br /></div>'
$('#_info').html(myInfo);
$('#_info').show();

$.ajax( 'save',
   {
       async: false,
       type: 'POST'
    } );

Answer 1

您的问题是您使用的是同步AJAX调用，并且在浏览器完成之前几乎将其锁定。尤其是，在您按下$.ajax({async:false})锁定键之前，浏览器将无法显示您的“正在加载”消息；例如，观察它的作用：

http://jsfiddle.net/ambiguous/xAdk5/

注意，在运行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来说并不是一件好事，除非绝对必要（很少如此），否则应避免使用它。