7

I'm currently using a tool to retrieve addresses in a database on the jQuery event keypress. When the text input loses focus, I cancel every pending requests to avoid the dropdown appears after the user finished to fill in the input. Everything works correctly, but, to finish I Send a final ajax request to go to the next step of my form. This request is really much slower than before I cancelled all these requests. I don't understand why, a cancelled request shouldn't affect the pending one (and I'm sure they are cancelled, looking it in the network tab in chrome tools). I'm using this code :

jQuery.xhrPool = [];
jQuery.xhrPool.abortAll = function() {
    jQuery(this).each(function(idx, jqXHR) {
        jqXHR.abort();
        jQuery('.loader').hide();
    });
};

jQuery.ajaxSetup({
    beforeSend: function(jqXHR) {
        jQuery.xhrPool.push(jqXHR);
    },
    complete: function(jqXHR) {
        var index = jQuery.xhrPool.indexOf(jqXHR);
        if (index > -1) {
            jQuery.xhrPool.splice(index, 1);
        }
    }
});

jQuery('#my_input').blur(function(){
    jQuery.xhrPool.abortAll();
});

I guess there i an optimization trick I don't get. Thanks for you help.

M4nch4k
  • 475
  • 1
  • 5
  • 17
  • If you didn't cancel them, is the delay still there? – Kevin B Aug 23 '13 at 14:48
  • It is much more slower than when I cancel them. – M4nch4k Aug 23 '13 at 14:52
  • And what if you sent that request without sending any of the previous ones that you're canceling in the first place? I suspect the canceled requests have nothing to do with how long the one you're having issues with is taking. – Kevin B Aug 23 '13 at 14:53
  • Also.... Is this an auto-complete or search box that you're sending an ajax request on *every* keypress? that's Very inefficient if you are. You should instead only be sending a request when you detect that the user has stopped typing using a simple throttle. Initially you'd think that would cause a delay, however in the end the overall performance is improved because you'll only send out 2-3 requests rather than 10-30 (1 for each character). – Kevin B Aug 23 '13 at 14:57
  • When I only send the last request without the other before, the time isn't really long, I'm sure the ajax requests cancelled affect the last one is duration, but I don't know why – M4nch4k Aug 24 '13 at 12:08
  • @M4nch4k Any feedback on this issue? – jpmorin Dec 11 '13 at 02:12
  • @jpmorin Not really, but it seems that the abort method works well enough. – M4nch4k Dec 13 '13 at 18:02

2 Answers2

6

Remember too that opening an AJAX request to the server, and then canceling the request will not cancel the request from processing on the server, it simply stops the browser from listening for a response. The server will continue to process any disconnected ajax requests until they finish running, at which point it tries to send a response to the client and finding no one listening, dies.

Mark
  • 861
  • 9
  • 17
  • 1
    This is a great point, and will be the case if the server-side language handles sessions similar to how php does. – Kevin B Apr 07 '14 at 19:56
  • Also forgot to mention, limits on AJAX requests by the browser may mean that if you make four requests, and the final request is the fifth, depending on the browser limits the fifth request is going to hang until one of the other four complete. – Mark Apr 07 '14 at 20:01
0
jQuery('#my_input').focusout(function(){   
    jQuery.xhrPool.abortAll();
});

blur event in that it supports detecting the loss of focus from parent elements

blur vs focusout -- any real differences?

Community
  • 1
  • 1
Babu
  • 605
  • 7
  • 24