Cancel ajax requests before sending next? (Jquery)

Question

I have a report in our internal system that can return data from 1 day to full years. Because of this, a report may take 0.5 seconds or more than 45 seconds to generate everything.

The report allows you to modify many filters, all that has been changed is very simple to disable the ajax request:

var ax = $.ajax({ type: "GET", url: "/blah", data: values, success: function(data) { .. } }); 

Now the problem arises when our wonderful user declares: “Oh wait, I want it to be from February, not January!” But, the request has already been happening since January - this is a lot of data! So the user switches the date parameter to February, and I see that the Javascript console is sending a second request. Now we have two ways, and this is a race!

/ report /? start_date = January (Download as before)

/ report /? start_date = February (Hey, I'm here too!)

Then, as a rule, the younger one will be loaded earlier, but then the other will be loaded, and it will rewrite the one that they already had. hmm :)

I tried using ax.abort() placed after declaring the variable ax , as mentioned here , but it doesn't seem to work.

So now I wonder what I am missing? I just want to kill the current request (on the client side, I know that I can not do anything on the server side), as soon as the user changes some parameters, so I don’t have two or more requests going at the same time, Configuring async: false is not an option, as it simply blocks the user.

Thanks in advance for your help.

Answer 1

You can see the ajaxmanager plugin.

Answer 2

I think trying to abort the previous request is not a good solution. Perhaps you should use a simple workaround - for each ajax request, increase the counter in javascript and pass it to the ajax callback. When a callback occurs, check to see if the response counter matches the current counter value. If not, ignore the response - it was fired by the deprecated click event.