Отслеживать время выполнения ajax

405

19 августа 2017, 01:57

Как отслеживать, сколько длится ajax запрос. Ясно, что есть timeout, но он устанавливает максимальное время выполнения.

Мне же нужно, если запрос выполняется больше 1 секунды, например, показать заглушку - крутящуюся штуковину. Обычно запросы проходят быстро. И чтобы при каждой отправке мигала "крутёлка" - это не дело. А вот если запрос по какой-то причине выполняется долго, то было бы хорошо оповестить пользователя - показать "крутёлку". Как это сделать?

Т.е. как показать "крутёлку" не сразу после начала запроса, а через какое-то время?

$.ajax({
    type: "POST",
    url: 'url',
    async: 'false',
    timeout: 20000,
    dataType: 'html',
    data: data,
    success: function(result){message(result);},
    error: function(err){console.log(err);}
});
$( document ).ajaxComplete(function() {
    jQuery('.animationload').addClass('hide'); //прячу крутёлку
});

Answer 1

var ifResponse = false;
$.ajax(...).always(function() {
  ifResponse =true; 
  $('.animationload').addClass('hide').removeClass('show');
});
setTimeout(function(){ 
  if (!ifResponse) 
    $('.animationload').removeClass('hide').addClass('show'); 
}, 1000);

естественно это работает только при одном асинхронном запросе! Если Вам надо выполнять несколько запросов тут подойдет такой метод:

var countResponse = 0;//!!!!Глобальная переменная!!!!
function Send() {
  ++countResponse;
  $.ajax(...).always(function() {
    --countResponse;
    if (countResponse <= 0)
      $('.animationload').addClass('hide').removeClass('show');
  });
  setTimeout(function(){ 
    if (countResponse > 0) 
      $('.animationload').removeClass('hide').addClass('show'); 
  }, 1000);
}

UPD 1 вариант (подсказано Lexx918):

let loaderTimer = setTimeout(function(){ 
  $('.animationload').removeClass('hide').addClass('show'); 
}, 1000);
$.ajax(...).always(function() {
  clearTimeout(loaderTimer);
  $('.animationload').addClass('hide').removeClass('show');
});

Answer 2

В beforeSend поставьте setTimeout на 1000 миллисекунд и внутри коллбека делайте лоадер видимым, а в always clearTimeout и скрывайте лоадер если он виден.
setTimeout callback выполняется независимо от основного потока сценария

Answer 3

Стартуем таймер на 1 сек. перед выполнением запроса аяксом. После получения ответа удаляем таймер, а крутилку скрываем независимо от прочих обстоятельств. (+ добавить это дело в коллбек ошибки выполнения запроса)

let loaderTimer = setTimeout(() => {
    // показываем крутилку
}, 1000);
$.ajax({
    success: result => {
        clearTimeout(loaderTimer);
        // прячем крутилку (даже если её и не было видно)
    }
});