Standard Click Request

$("#load").click(function() { $.ajax({ beforeSend: function (data) { $('#loading_box').show(); }, success: function (j) { $('#loading_box').hide(); $('#content').html(j.html); } }); return false; });

I think in the beforeSend you need to show the download indicator, inside setTimeout . But what if the success event comes with the command to hide the indicator, and then the timeout ends and the indicator shows when it is no longer needed?

The preloader must be shown at boot, longer than a certain time and hidden when the answer came. In addition, you need to consider that it is possible to click again and launch the request, it may also not be successful. It is obvious that in all these cases, the timeout must be cleared and restarted at the last request.

Can you suggest an algorithm or sample code? Or perhaps there is something ready for such an advanced indicator output?

  • Ajax has a done: function() {} event done: function() {} . It doesn’t matter if the server returns a response or the time goes out, it will work when the request is completed. No setTimeout needed. And in beforeSend is not a loading indicator, but just something like “please wait” - Mr. Black
  • For the download indicator you need to specify the Content-Length header and its length in the response from the server. If the question is in this, it is in the download indicator that I can give a detailed answer. And in ajax there is an event like complete: function() {} . Fired upon completion of the request - Mr. Black
  • And I did not understand why return false . Instead of the link button chtoli? - Mr. Black
  • > And I didn’t understand why return false and links are always used - htclog81
  • What about the Content-Length, what will it give? I meant my custom type indicator gif pictures for example - htclog81

1 answer 1

 $('button').click(function() { $.ajax({ beforeSend: function (data) { timer = setTimeout(function() { gif.show(); }, 500); }, complete: function() { clearTimeout(timer); gif.hide(); }, }); });
  • I don’t even know why this is necessary, the fraction of a second is negligible, I understand for another two seconds. However, we set the timer , if the request does not have time to complete in less than this time, the preloader will be shown, otherwise it will not be - Mr. Black
  • I would set a flag so that the request would not run if the previous one failed - Mr. Black
  • You can put more than 500 ms. The main logic. - htclog81
  • It did not start until the previous one was executed ... But if the user clicked on one filter, then immediately on the other, then why wait until the previous one works? I think then it is necessary that the newer has already been executed .. Or is the presence of the previous request confusing the current logic? For example, will the timer from the previous request work? Then you need to clear the timer from a possible previous request in beforeSend? - htclog81
  • @ htclog81, I’ll not say exactly here. Timer variable reassigned. And if there is no, there will be an error, although you can set the var timer - Mr. Black