Как показать ожидающее сообщение во время синхронизации вызова ajax в браузере

Question

Как показать ожидающее сообщение о синхронизации вызова 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 />' +
    '&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 не очень хорошая вещь для ваших пользователей, хотя, вы должны стараться избегать этого, если это не является абсолютно необходимым (и это редко бывает).

Answer 2

<div class="loading">Loading...</div>

Ваш вызов ajax:

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

$('.loading').fadeOut(50);