Stalled and pending ajax requests by JQuery in Chrome

I have stumbled on exactly the same problem. As soon as I disabled:

Use a prediction service to load pages more quickly

Go Advanced Settings -> Privacy -> ca. 3rd checkbox, everything started to work as it should. I was unable to reproduce the error.

The jquery/ajax poller works perfectly in Firefox. It's only Chrome - tested on Linux & Windows.

It is not a perfect solution, as it won't affect users in the global sense - but maybe you are in the same situation as I - limited audience.

You can try this.

NOW UPDATED WITH ACTUAL WORKING CODE

(used some timezone code of my own so excuse the references to timezone)

First initialize arrays and run your request counting logic

var request = ( typeof request != 'undefined' && request instanceof Array ) ? request : [];var pendingAjax = ( typeof pendingAjax != 'undefined' && pendingAjax instanceof Array ) ? pendingAjax : [];

Use .ajaxStart and .ajaxStop to keep track of the active requests.

var ajaxActive = 0;$( document ).ajaxStart(function() {  ajaxActive++;  document.ajaxQueueFull = ajaxActive > 5;});$(document).ajaxStop(function() {  ajaxActive--;  document.ajaxQueueFull = ajaxActive > 5;}

Create a function to build new requests

    function ajaxRequestNew(t, u, d, s) {        var instance = request.length + 1;        request[instance] = $.ajax({            method: t,            url: u,            data: {ajaxPost: d },            success: s        });        return instance;    }

Now create your request getting the instance number returned

    var instance = ajaxRequestNew('POST',                                   'js/ajax_timezone.php',                                   { ajaxAction : "ajaxGetTimezone",                                     tzoffset : "0",                                     tztimezone: "America/New_York" },                                    function(data) {  }    );

The $.ajax() function returns a XMLHttpRequest object. So we use a while loop to check when our ajax actually gets sent and aborts other active requests if the request is stalled.

    while(request[instance] === null || (request[instance].readyState < 1 || request[instance].readyState > 4)) {        if (document.ajaxQueueFull) {            //abort existing requests            $.each(request, function(i,v) {                if (i !== instance) {                    request[i].abort();                }            });        }    }

Push your request onto the stack

    pendingAjax.push(request[instance]);

Create callbacks for your request

  var timezoneFailCallback = function(data) {        console.log('fail');        console.dir(data);    };    var timezoneSuccessCallback = function(data) {        console.log('success');        console.dir(data);    };

use when to apply the callbacks

    $.when.apply($, pendingAjax).done( timezoneSuccessCallback ).fail( timezoneFailCallback);

The code may need a little tweaking for your app, but hopefully you get the idea. Let me know if you have any questions.

I know this is an old thread but I'm posting this for people that are scrambling to find some sort of answer for this.I had to deal with this head scratcher as well. My problem was due to Ad-blocker blocking an API call that had the word "coupon" in it. It was blocking the request while keeping it alive. after few blocks every request would automatically go to pending status since there were too many (I think around 6 or 7) live requests.

Type chrome://net-internals/#events in your chrome address bar to inspect requests. That will give you a clearer overview of the problem.I attached two images that I captured While I was trying to figure this out.

debugger screenshot

net-internal screenshot