2

My problem is as follows:

  • On a page, I am doing multiple (6) ajax calls (via jQuery) to fetch some data at the same time (using php wrapper to fetch the data via the calls)
  • The requests are made at the same time and it takes them 10-20 seconds to complete
  • If user clicks on any of the links to go somewhere else (to some other page), I can see that all the calls that didn't complete get cancelled
  • However, the browser still waits for 20 seconds to navigate to the other page - it is like it is still waiting for the longest call to complete, even if it is cancelled

(Same issue is happening in Chrome and Firefox, ajax calls are asynchronous...I have tried to set ajax timeout, to capture readystate=o in ajax error response, even tried to do something with webworkers, to no avail)

Any insight would be helpful

Thanks!

R. Oosterholt
  • 7,720
  • 2
  • 53
  • 77
IvanS
  • 47
  • 1
  • 5
  • 1
    You'll have better luck getting a good answer if you post some code. – keeehlan Dec 04 '13 at 18:07
  • and you'll have better to send only one ajax request to retrieve all datas – A. Wolff Dec 04 '13 at 18:09
  • Is there any way you can combine the calls into one? – scrowler Dec 04 '13 at 18:09
  • Have try using explicitly ajax abort() method? – A. Wolff Dec 04 '13 at 18:11
  • Yes, I have tried abort() method too... Actually, even if I press "Stop" button on the browser, and click on any other link, it will still wait for the cancelled calls to "finish" (e.g. wont navigate for 20 seconds)... I will try combining the calls into a single call (tho I am doubtful it will help) – IvanS Dec 04 '13 at 18:30
  • As explained below, it ended up being a server side issue actually - a mismanagement of a session resulting in browser locking). Thank you all for your comments. – IvanS Dec 04 '13 at 22:02

1 Answers1

2

That is due to the maximum number of connections of the browser to a single domain.

See Browserscope for mamimum per browser.

  • IE 8+9: 6 connections
  • IE 10: 8 connections
  • Chrome 26: 6 connections
  • Firefox 21: 6 connections

What you could do is collect all Defferred objects and cancel them when the use clicks on a link.

example:

// some ajax calls
doAjax({});
doAjax({});

var requests = [];

// helper function to perform and register calls
function doAjax(options) {
    var jqXHR= $.ajax(options);
    requests.push(jqXHR);
    jqXHR.always(function(jqXHR) {
         var index = requests.indexOf(jqXHR);
         if (index!=-1) {
             requests.splice(index, 1);
         }
    });
}

// function to abort all calls
// when your application has a router to provide navigation, this function
// is typically called when you navigate to another page
function abortAllPendingRequests() {
    var i;
    for (i=0; i<requests.length; i++) {
        var xhr = requests[i];
        // already finished calls (readyState 4) should not be aborted
        if (xhr.readyState != 4) {
            xhr.abort();
        }
    }
};

All is left is calling the abortAllPendingRequests function when the user tries to navigate to another page.

When you have some sort of router (e.g. Backbone.Router) you could call it there.

If your application does not have a router for navigating, but you make use of plain anchor links, you could add an onClick to the links which calls the abortAllPendingRequests function.

R. Oosterholt
  • 7,720
  • 2
  • 53
  • 77
  • Thanks for your very detailed explanation & help... My issue actually ended up being a server side issue (mismanagement of session resulting in calls being locked). – IvanS Dec 04 '13 at 22:01