I'm wondering, what's the best way to handle timeouts with jQuery.ajax(). That's my solution at the moment: If an timeout occurs the page will be reloaded and the script gets another chance to load the data within it's given timeframe.

Problem: if "get_json.php" (example below) is really not available, it will become an endless reloading-loop. Possible solution: adding a counter and cancel after $x reloads.

Question 1: How to handle the timeout error best?

Question 2: What's your recommended timeframe for a timeout and why?

Code:

$.ajax({
    type: "POST",
    url: "get_json.php",
    timeout: 500,
    dataType: "json",
    success: function(json) {
        alert("JSON loaded: " + json);
    },
    error: function(request, status, err) {
        if (status == "timeout") {
            // timeout -> reload the page and try again
            console.log("timeout");
            window.location.reload();
        } else {
            // another error occured  
            alert("error: " + request + status + err);
        }
    }
});

Thanks in advance!

I'm wondering, what's the best way to handle timeouts with jQuery.ajax(). That's my solution at the moment: If an timeout occurs the page will be reloaded and the script gets another chance to load the data within it's given timeframe.

Problem: if "get_json.php" (example below) is really not available, it will become an endless reloading-loop. Possible solution: adding a counter and cancel after $x reloads.

Question 1: How to handle the timeout error best?

Question 2: What's your recommended timeframe for a timeout and why?

Code:

$.ajax({
    type: "POST",
    url: "get_json.php",
    timeout: 500,
    dataType: "json",
    success: function(json) {
        alert("JSON loaded: " + json);
    },
    error: function(request, status, err) {
        if (status == "timeout") {
            // timeout -> reload the page and try again
            console.log("timeout");
            window.location.reload();
        } else {
            // another error occured  
            alert("error: " + request + status + err);
        }
    }
});

Thanks in advance!

• javascript
• jquery
• ajax
• error-handling
• timeout

• 5 Why reload the entire page instead of just retrying the Ajax call? – JJJ Commented Jun 17, 2013 at 20:35
• 1 @Juhana: do you mean $.ajax(this); ? – Mr. B. Commented Jun 17, 2013 at 20:38
• 2 Well, yes, for example. – JJJ Commented Jun 17, 2013 at 20:39

1 Answer 1

You can do it other way, you can clear interval first when timeout occured. If you use this clearInterval() function than you won't need to reload page. It'll stop automatically.

function ajax_call(){ 
$.ajax({
        type: "POST",
        url: "get_json.php",
        timeout: 500,
        dataType: "json",
        success: function(json) {
            alert("JSON loaded: " + json);
        },
        error: function(request, status, err) {
            if (status == "timeout") {
                // timeout -> reload the page and try again
             clearInterval(ajax_call);
                window.location.reload(); //make it comment if you don't want to reload page
            } else {
                // another error occured  
                alert("error: " + request + status + err);
            }
        }
    });
}

setInterval(ajax_call,timeout_duration);