How to keep track of how long the ajax request is. It is clear that there is a timeout , but it sets the maximum execution time.

I also need if the request is executed for more than 1 second, for example, to show the cap - a rotating thing. Usually requests pass quickly. And so that with each dispatch a blinker “twinkle” is not the case. But if the request for some reason is executed for a long time, then it would be good to notify the user - to show the "cool". How to do it?

Those. How to show the "cool" not immediately after the start of the request, but after some time?

 $.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'); //прячу крутёлку });
  • In the sense of canceling the request? Or show the timer? - Dmitry Chistik
  • show "cool". Completed the question. - n.osennij
  • one
    Well, use the twister in a second if the answer has not come, remove it if always executed in the ajax request. Or do you have a question how to make a twister? - Dmitry Chistik
  • @Dmitry Chistik The question is how to show the whip not immediately after launching the request, but after a while. - n.osennij

3 answers 3

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

Of course, this only works with one asynchronous request! If you need to perform several queries, this method will work here:

 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 option (prompted by Lexx918):

 let loaderTimer = setTimeout(function(){ $('.animationload').removeClass('hide').addClass('show'); }, 1000); $.ajax(...).always(function() { clearTimeout(loaderTimer); $('.animationload').addClass('hide').removeClass('show'); });
  • Thank. Works. I use the first option. I have all the ajax synchronous requests - so necessary. So two requests can not be. Thank you very much! - n.osennij
  • Both variable global and function and only for one request. Poorly. Easily fixed by selection in a separate scop: ({var foo = 123; var bar = function(){}; bar(foo);})() . - Lexx918
  • @ Lexx918 yes, took your option for UPD 1 - Dmitry Chistik

In beforeSend set setTimeout to 1000 milliseconds and inside the callback make the loader visible, and in always clearTimeout and hide the loader if visible.
setTimeout callback runs regardless of the main script thread

  • Thanks for the answer. - n.osennij

We start the timer for 1 sec. before executing the request by Ajax. After receiving the answer, delete the timer, and hide the spinner, regardless of other circumstances. (+ add this case to callback error)

 let loaderTimer = setTimeout(() => { // показываем крутилку }, 1000); $.ajax({ success: result => { clearTimeout(loaderTimer); // прячем крутилку (даже если её и не было видно) } });
  • Thanks for the answer. - n.osennij
  • one
    success should always be used for change - Dmitry Chistik