Остановить блокировку браузера во время (синхронно) Ajax?

То, что я пытаюсь сделать, это добавить изображение загрузки в div (так что пользователь знает, что что-то загружается), а затем я вызываю функцию jquery ajax, которая установлена на "async: false". Вот мой код:

$jQuery("#playersListDiv").html(loadingImage);    
$jQuery.ajax({
         type: "POST", /* this goesn't work with GET */
         url: urlValue, /*ex: "NBAgetGamesList.php" */
         data: parameters, /*ex: "param1=hello" */
         cache: false,
         async: false,
                     success: function(data){

                     }
});

Проблема заключается в том, что браузер блокирует и не добавляет загружаемое изображение до тех пор, пока не будет выполнено обращение ajax, что бесполезно, конечно. Firefox - единственный браузер, который фактически добавляет загрузочный образ. IE, Chrome и Safari НЕ добавляйте загружаемое изображение.

Я знаю, что блокировка браузера происходит, потому что для async установлено значение false, но это мой единственный вариант, потому что я должен дождаться завершения этого запроса до продолжения, потому что мне нужны данные, которые возвращаются.

Есть ли способ обойти это? Если я добавлю предупреждение после добавления загружаемого изображения, но я не хочу, чтобы каждый раз появлялось предупреждение.

Ответ 1

Несмотря на ваше утверждение об обратном, вам не нужно, чтобы он был синхронным. Независимо от того, что вам нужно сделать с/после ответа, можно выполнить в случае успешного (и/или ошибки или полного) обратного вызова. Итак, измените:

$jQuery("#playersListDiv").html(loadingImage);    
$jQuery.ajax({
   ...
   async: false,
   ...
});
// OTHER CODE

$jQuery("#playersListDiv").html(loadingImage);    
$jQuery.ajax({
   ...
   async: true,
   success: function(data) {
      // OTHER CODE
   }
});

Или переместите "ДРУГОЙ КОД" к отдельной функции, которую вы вызываете из обратного вызова успеха.

Если вам нужно что-то более сложное, чем это, вы можете инкапсулировать вышеуказанное в функцию и передать ему обратный вызов:

function doAjaxStuff(callback) {
    $jQuery("#playersListDiv").html(loadingImage);    
    $jQuery.ajax({
       ...
       async: true,
       success: function(data) {
          // optional other processing here, then:
          callback(data);
       }
    });
}

// then from somewhere else in your code:
doAjaxStuff(function(data) {
   // do something with data
});

Ответ 2

Вы хотите jQuery.Deferred().

Ответ 3

Я столкнулся с этой проблемой, и я нашел для нее решение.
Пусть! вам действительно нужно использовать async : false в ajax request, и вы хотите показать загружаемое изображение во время выполнения запроса ajax. Но запрос ajax останавливает другую операцию пользовательского интерфейса (отображение загрузочного изображения) из-за async : false. Итак, простое решение для этого, используйте fadeIn для отображения загружаемого изображения и fadeOut, чтобы скрыть загружаемое изображение.

Вот демон jsFiddle, в котором содержится запрос ajax с async : false. Из-за этого загружаемое изображение не отображается. (Я использовал show метод для отображения загружаемого изображения.).

Вот еще jsFiddle с эффектом fadeIn и fadeOut. Он отображает загружаемое изображение независимо от async : false в ajax запросе.