Ajax call fails for no reason in Chrome

Question

I have a very simple Ajax call, running in a 1 second interval, that updates my page with match status:

var getMatches = function() {
        $.ajax({
            url: '/match',
            type: 'GET',
            success: function(data) {
                avm.matches(data);
            },
            error: function(jqXHR, textStatus, errorThrown) {
                console.log('Error occured: ' + errorThrown);
            }
        });
    };

This worked well from the beginning of the project, but lately started misbehaving - on Chrome only.

The call just won't fire - I have Log::debug on the server side, and the call doesn't reach it. The network panel in Developer Tools does not show a call. The textStatus is 'error', errorThrown is empty, and the jqXHR.status is 0. While this is happening, if I just run http://localhost/match, or even open the same page in FireFox - I get the correct results. So this is NOT a server or routing issue - it's purely in the client.

This behavior started yesterday, and now I'm observing it on the production server as well. And it is sporadic - if I close Chrome, clean cache, etc., it'll work again - for a while. Could there be something in the cache that's blocking the call?

Any ideas how to troubleshoot this?

Answer 1

Sounds like the browser is using the cached response. Try adding the option:

cache: false

to the $.ajax() call.

Answer 2

I assume you are doing something like this.

setInterval(ajaxFunction, 1000);

What happens if this ajax requests takes more than 1 second to complete? You will have two pending ajax requests. The longer it takes, the more the requests will pile up and eventually cause the browser to go ape-shit.

The solution is to implement something akin to the following.

function ajaxRequest() {
    $.ajax({
         complete: function() {
               setTimeout(ajaxReqest, 1000);
         });
    });
}