Question

我已经看过很多这样的线程并经历了其中的一些，但到目前为止似乎没有任何帮助。因此，我正在尝试在ajax呼叫发生时连续呼叫计时器。一旦ajax调用到达完整事件，我想clearInterval计时器，但这似乎不起作用，因为对CheckProgress（）的调用继续进行。

这是我的代码：

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);
    }

编辑： enter image description here

Answer 1

我从未喜欢过setInterval。我喜欢直接管理计时器。

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

你的代码很好。这是一个fiddle。它可以像您预期的那样在Google Chrome和Firefox上运行。您能否确认此代码段在您的计算机上无效？

我做了一些微小的改动：

AJAX致电/echo/json
较小的间隔（50毫秒）
函数引用：setInterval(CheckProgress, 5000)而不是带有JavaScript的字符串

几次调用间隔函数，并在echo服务AJAX调用返回后清除。确切地说你想要它。

你能在那里重现这个问题吗？

而另一个javascript clearInterval无法正常工作

2 个答案: