CODEWITHSUNDEEP
javascriptjqueryajaxsettimeout
Casey Crookston
Casey Crookston

Reputation: 13945

Repeat/loop ajax call on a timer - even if timed out

We have a display board that needs to update every second. The AJAX call to the server triggers a stored proc that is a pretty simple SELECT statement and it takes only milliseconds to execute.

Originally, from time to time because of network latency (or sunspots, or who knows what) this AJAX process would (occasionally, rarely) time out. By tweaking how we handle the timer and by setting the timeout to 0, we have it so it's now running stable and the timeout never happens... yet.

That being said, I'm still nervous that a timeout could still happen. And IF happens, the goal is that it would just keep going. Basically, ignore the timeout and just try again... forever. Nothing like MaxError, or RetryLimit, or TryCount, etc.

Here's what I have now:

setTimeout(function run() {
    // When the timer elapses, get the data from the server
    GetData();
    setTimeout(run, _refreshRate);
}, 1000);


function GetData() {
    //console.log("Attempting to obtain the data...");
    jQuery.ajax({
        url: "something.ashx",
        type: "GET",
        contentType: 'application/json; charset=utf-8',
        success: function(resultData) {
            //console.log("Got the data.");
            ParseJson(resultData);
            // show the last refresh date and time
            $('#refreshTime').html(GetDateTime());
        },
        error : function(xhr, textStatus, errorThrown) {
            if (textStatus == 'timeout') {
                //console.log("Timeout occured while getting data from the server.  Trying again.");
                // If a timeout happens, DON'T STOP. Just keep going forever.
                $.ajax(this);
                return;
            }
         },
         timeout: 0,
    });
}

Everything inside of ParseJson(resultData); works great. No issues there. And The timer is setup (I believe) so that it will wait until one GetData() is done before it tries to start another.

I believe that by setting the timeout to 0 that it means "don't ever time out."

My question is this:

Am I correctly handling the error for a timeout? I am using the selected answer in this thread as my guide:

What's the best way to retry an AJAX request on failure using jQuery?

But I don't need a retryLimit limit.

I've also looked at these threads:

How to make the Ajax call again in case Time out error occurs

ajax timeout callback function

I think I've boiled all the info down to a simple solution, but I would like some peer review. Is there a better way to do this?

Upvotes: 1

Views: 3993

Answers (2)

Thomas
Thomas

Reputation: 2536

function GetData() {
    //console.log("Attempting to obtain the data...");
    jQuery.ajax({
        url: "something.ashx",
        type: "GET",
        contentType: 'application/json; charset=utf-8',
        success: function(resultData) {
            //console.log("Got the data.");
            ParseJson(resultData);
            // show the last refresh date and time
            $('#refreshTime').html(GetDateTime());
        },
        error : function(xhr, textStatus, errorThrown) {
            if (textStatus == 'timeout') {
                //console.log("Timeout occured while getting data from the server.  Trying again.");
                // If a timeout happens, DON'T STOP. Just keep going forever.
                $.ajax(this);
                return;
            }
         },
         timeout: 0,
    });
}

var myInterval = setInterval(getData, 1000)
// if you want to stop it elsewhere:
// clearInterval(myInterval)

Instead of timeout you could use setInterval

Upvotes: 1

Mackan
Mackan

Reputation: 6271

I'd prefer a solution that only queued a new call when the current had completed. something like..

function poll() {
  setTimeout(function () {
     GetData();
  }, 1000);
}

function GetData() {
    jQuery.ajax({
        url: "something.ashx",
        type: "GET",
        contentType: 'application/json; charset=utf-8',
        success: function(resultData) {
            //...
        },
        error : function(xhr, textStatus, errorThrown) {
            //...
        },
        complete: function() {
           poll();
        },
        timeout: 0,
    });
}

poll();

This way your calls will not risk overlapping anyway.

Upvotes: 6

Related Questions