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

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

12 голосов
/ 18 марта 2012

Я пытаюсь добавить загружаемое изображение в div (чтобы пользователь знал, что что-то загружается), а затем я вызываю jjery 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, но это мой единственный вариант, потому что мне нужно дождаться завершения этого запроса, прежде чем продолжитьнужны данные, которые возвращаются.

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

Ответы [ 3 ]

12 голосов
/ 18 марта 2012

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

$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
});
0 голосов
/ 10 января 2017

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

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

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

0 голосов
/ 18 марта 2012

То, что вы хотите, это jQuery.Deferred () .

...