如何在浏览器中同步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对你的用户来说不是一件好事,你应该尽量避免使用它,除非绝对必要(而且很少).