.show() не работает внутри ajaxstart()

Question

Ниже приведен сценарий java для загрузки изображения при запуске ajax.

<script type="text/javascript"> 
     jQuery(function(){ 
      $(document).ajaxStop(function() { 
       $("#ajax_loader").hide(); 
       //alert("end"); 
       console.log(new Date().getTime()); 
      }); 
      $(document).ajaxStart(function() { 
       $("#ajax_loader").show(); 
       //alert("start"); 
       console.log(new Date().getTime()); 
      }); 
     }); 
    </script> 

ниже - содержимое, которое я скрываю/показываю.

<div id='ajax_loader' 
      style="position: fixed; left: 50%; top: 40%; color: red; font-size: 3em; display : none; zIndex : 1;"> 
      processing..... 
     </div> 

Проблема заключается в том, когда какой-либо Ajax называется методом ajaxStart() выполняется, но это не показывает «#ajax_loader» содержание.

По-прежнему требуется от 2 до 3 секунд для ответа.

Но если мы предупреждаем о предупреждении внутри метода ajasStart(), он разрешает содержимое «#ajax_loader».

Может ли кто-нибудь помочь мне по этому вопросу?

Answer 1

Невозможно иметь индикатор загрузки и синхронный ajax, не выполняя аякс асинхронным способом.

Это связано с тем, что рендеринг браузера помещается в очередь обратного вызова, а очередь обратного вызова обрабатывается только тогда, когда стоп-сообщение пуста. Синхронный ajax предотвращает опорожнение столбца до завершения ajax, что делает невозможным вызывать что-либо на странице, пока оно не будет завершено.

Обходной способ заключается в том, чтобы обернуть запрос ajax в setTimeout, что позволяет очистить столбец, а рендеринг - до отправки запроса ajax. Тем не менее, это не будет работать с ajaxStart, потому что это не вызвано до тех пор, пока ... вы не догадались ... начинается ajax. Это, вероятно, также нарушит все, что требует от вас синхронного запроса.

Единственное реальное решение этого - не использовать синхронный ajax и рефакторинг кода, который налагает на вас это безумное требование.

async: true 

Answer 2

Это работает просто отлично, как вы его написали. Конечно, это предполагает, что операция AJAX является действительной. Возможно, вы захотите открыть панель разработчика в своем браузере и посмотреть трафик.

//your part 
    jQuery(function() { 

     $(document).ajaxStop(function() { 
      $("#ajax_loader").hide(); 
      //alert("end"); 
      console.log(new Date().getTime()); 
     }); 
     $(document).ajaxStart(function() { 
      $("#ajax_loader").show(); 
      //alert("start"); 
      console.log(new Date().getTime()); 
     }); 
    }); 

    //my part 
    jQuery(function() { 
     $("#thebutton").click(function() { 

      $.ajax({ 
       crossDomain: true, 
       url: "/", 
       success: function(e) { 
        var piece = $("<div></div>"); 
        piece.html(e); 
        $("#log").append(piece); 
       }, 
       error: function(e) { 
        //alert(e) 
       } 
      }) 
     }); 
    }) 

https://jsfiddle.net/8uhxh9uv/