Using clearTimeout(x) in ajax call

Question

I am writing codes where the code will do some polling for statistics to the server using AJAX. My web application is getting data from the server every 3 seconds once the server returned the data. It is working good but however, I want to apply clearTimeout(x) function to stop the execution and print something to user when any error occur like "timeout" or "error" triggered by error setting. I managed to search the similar case with me here and this also link. But for some reason my code does not do what I want. Here is what I have so far

var timeoutid = 0;

var myfunc = function() {
    $.ajax({
        type: "POST",
        url: "pull.php",
        error: function(xhr, status, error){
            if( status==="timeout" || status==="error") {
                alert("Timeout or unable to receive statistics!");
                clearTimeout(timeoutid);
            }
        },
        success: function(msg){ 
            $('#res').val(msg);
            //timeoutid = setTimeout(poll, 3000);
        },
        complete: function(){
            timeoutid = setTimeout(myfunc, 3000);
        },
        timeout: 5000
    });
}

myfunc();

The result of the above when I disable my Internet adapter is it keeps looping and alert me the error without stopping the execution. I don't really know how or where do I put my clearTimeout due to localized variable issue based on what I have read. Not really a master in jQuery in detailed though. Appreciate your kind respond and thank you in advance.

score 0 · Accepted Answer · answered Feb 23 '15 at 05:52

0

It is because you are again creating a new timer in the complete callback which will get executed in the case of error also

var myfunc = function () {
    $.ajax({
        type: "POST",
        url: "pull.php",
        error: function (xhr, status, error) {
            if (status === "timeout" || status === "error") {
                alert("Timeout or unable to receive statistics!");
            }
        },
        success: function (msg) {
            $('#res').val(msg);
        },
        complete: function (jqXHR, status) {
            if (status !== "timeout" && status !== "error") {
                setTimeout(myfunc, 3000);
            }
        },
        timeout: 5000
    });
}

myfunc();

answered Feb 23 '15 at 05:52

Arun P Johny

384,651
66
527
531

Thank you, I have tested it and it works! That explains it. Great, but do I have to use clearTimeout(x) function? – UserProg Feb 23 '15 at 06:30
@UserProg not required.. if you were using an interval, then you would have to... since you hare using timeout there is no need to – Arun P Johny Feb 23 '15 at 06:31
Noted on that. Because I am a bit confused on `setInterval` and `setTimeout`. Anyway thank you for your help. I will accept this as an answer. – UserProg Feb 23 '15 at 06:33
Hi There, one question. It is working OK. However sometimes & I don't even know why when I click the link to the same page containing the above script or navigate to other page, the alert in the `error:` call back will be popped up. Any idea why? – UserProg Feb 23 '15 at 08:09
@UserProg see http://stackoverflow.com/questions/1370322/jquery-ajax-fires-error-callback-on-window-unload-how-do-i-filter-out-unload-a & http://stackoverflow.com/questions/699941/handle-ajax-error-when-a-user-clicks-refresh – Arun P Johny Feb 23 '15 at 08:45

Using clearTimeout(x) in ajax call

1 Answers1