And yet another javascript clearInterval not working

Question

I've seen a bunch of these threads and went through a few of them but nothing seemed to be of help so far. So I'm trying to call the timer continuously while the ajax call is taking place. Once the ajax call reaches the complete event, I'd like to clearInterval the timer, but that doesn't seem to be working because the call to CheckProgress() keeps going and going.

Here's my code:

var timer = "";

        $("#ChartUpdateData").click(function () {
            $("#loadingimgfeatdiv").show(); //ajax loading gif
            if (timer == "")
            {
                console.log("Starting Progress Checks...");
                timer = window.setInterval("CheckProgress()", 5000);
            }

            $.ajax({
                type: "POST",
                async: true,
                url: '@(Url.Action("UpdateServerData","Charts"))',
                contentType: "application/json; charset=utf-8",
                success: function (data) {

                },
                error: function (XMLHttpRequest, textStatus, errorThrown) {

                },
                complete:function (jqXHR, textStatus) {
                    $("#loadingimgfeatdiv").hide();
                    StopCheckingProgress();
                    LoadChart();
                },
            });

        });

    function StopCheckingProgress()
    {
        window.clearInterval(timer);
        timer = "";
        console.log("Ending Progress Checks...");
    }
    function CheckProgress()
    {
        console.log("Checking Progress...");
        console.log(timer);
    }

EDIT:

Answer 1

I've never liked setInterval. I like managing timers directly.

var timerStop = false

$("#ChartUpdateData").click(function () {
    $("#loadingimgfeatdiv").show(); //ajax loading gif
    if (!timerStop) {
        console.log("Starting Progress Checks...");
        CheckProgress()
    }

    $.ajax({
        type: "POST",
        async: true,
        url: '@(Url.Action("UpdateServerData","Charts"))',
        contentType: "application/json; charset=utf-8",
        success: function (data) {

        },
        error: function (XMLHttpRequest, textStatus, errorThrown) {

        },
        complete:function (jqXHR, textStatus) {
            $("#loadingimgfeatdiv").hide();
            timerStop = true;
        },
    });

});

function CheckProgress()  {
    if(timerStop) {
        console.log("Ending Progress Checks...");
        return;
    }
    console.log("Checking Progress...");
    console.log(timer);
    window.setTimeout(function(){CheckProgress()}, 5000);
}

Answer 2

Your code is fine. Here is a fiddle. It works on Google Chrome and Firefox just as you expected. Can you confirm this snippet is not working on your machine?

I made few tiny changes:

• AJAX call to /echo/json
• Smaller interval (50 ms)
• function reference: setInterval(CheckProgress, 5000) instead of string with JavaScript

Interval function is called few times and is cleared once echo service AJAX call returns. Exactly how you want it to be.

Can you reproduce the problem there?