jQuery.ajax() - How to handle timeouts best?

20,930

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);
Share:
20,930
Mr. B.
Author by

Mr. B.

Updated on July 09, 2022

Comments

  • Mr. B.
    Mr. B. almost 2 years

    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!