Отображать счетчик при отправке запроса синхронизации Ajax

Question

Мне нужно отобразить счетчик при отправке синхронного Ajax-запроса на сервер для получения данных.

Я знаю, что лучше делать это в асинхронном режиме, но мне не разрешают это делать. Я также знаю, что синхронизация ajax-запросов блокирует браузер.

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

У вас есть какое-либо решение, чтобы решить мою проблему, пожалуйста? Большое спасибо!

Answer 1

Вы можете использовать AJAX beforeSendsuccesserror или же complete функция. Или вы можете просто показать счетчик перед вызовом AJAX и спрятать его в свой success или же error или же complete функция в зависимости от ваших требований.

Образец кода:

  $('.spinner-div').show();
  $.ajax({
  //You AJAX function
  success: function(){
     $('.spinner-div').hide();
     //Show success message
  },
  error : function(){
     $('.spinner-div').hide();
     //Show error message
  }
  });

Answer 2

Jquery имеет несколько обработчиков событий ajax. Ты можешь использовать

$( document ).ajaxStart(function() {
  $( "#loading" ).show();
});

показать загрузочное изображение при отправке запроса и

$( document ).ajaxComplete(function() {
  $( "#loading" ).hide();
});

скрыть загрузочное изображение после завершения запроса.

REF: https://api.jquery.com/ajaxStart/ и http://api.jquery.com/ajaxcomplete/

Answer 3

В запросах ajax есть метод.success().

Вот несколько примеров того, как это можно использовать. jQuery: возвращать данные после успешного вызова ajax.

Здесь есть некоторые споры о запрете. Должен ли я использовать.done() и.fail() для нового кода JQuery AJAX вместо успеха и ошибки

Answer 4

Вы могли бы просто show ваш спиннер перед вашим AJAX-вызовом, затем hide это внутри success & error вашего вызова AJAX:

$('#spinner').show(); //Show your spinner before the AJAX call
$.ajax({
  url: "test.html",
  method: 'POST',
  success: function(data){
    $('#spinner').hide(); //Hide your spinner after your call
  },
  error: function(){
    setTimeout(() => { //I'm setting a setTimeout here so you have the time to see the spinner.
                       // Remove it when you copy this code.

      $('#spinner').hide(); //Hide your spinner after your call
    },2000);
  }
});

#spinner{
  display: none;
  width: 10px;
  height: 10px;
  animation: rotating 2s linear infinite;
}

@keyframes rotating {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="spinner">0</div>

Answer 5

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

            <div id="chart_score" style="width: 100%; height: 300px;">
                <div style="text-align: center; height: 100%;">
                    <br />
                    <br />
                    <br />
                    <img src="../../Img/GIF/CircleLoader.gif" />
                    <br />
                    <br />
                    Loading chart...
                </div>
            </div>

Answer 6

Добавление к решениям выше (которые у меня уже были, но не сработали):

я имел async:false,в моем вызове ajax, который я скопировал из какого-то примера, что, конечно же, нарушает одновременное обновление интерфейсного счетчика. Легко подумать, но это нигде не было явно показано в приведенных выше примерах.

Так, async:true наконец-то исправил.