清除 Javascript 间隔答案

【问题标题】：Clear a Javascript Interval清除 Javascript 间隔
【发布时间】：2017-02-12 10:52:50
【问题描述】：

我正在对文件运行 HTTP 请求，根据响应是“200”还是其他响应，运行成功或错误函数。该请求每秒发生一次。

我面临的问题是，当我收到很多错误响应时，它们都一起运行并且最后一个不会停止，例如结束间隔以开始新的间隔。

红灯开始闪烁得太快了。谁能帮我吗。我的代码在下面，我已经玩了几个小时了，但似乎无法深入了解它。

var requestResponses = {

    greenLight: $('.cp_trafficLight_Light--greenDimmed'),
    redLight: $('.cp_trafficLight_Light--redDimmed'),
    greenBright: 'cp_trafficLight_Light--greenBright',
    redBright: 'cp_trafficLight_Light--redBright',

    init: function (url) {
        setInterval(function () {
            requestResponses.getResponse(url);
        }, 1000);
    },

    successResponse: function () {
        var redBright = requestResponses.redBright,
            greenBright = requestResponses.greenBright;
        requestResponses.errorCode = false;
        requestResponses.redLight.removeClass(redBright);
        requestResponses.greenLight.addClass(greenBright);
    },

    errorResponse: function () {
        requestResponses.runOnInterval();
    },

    runOnInterval: function () {
        // clearInterval(runInterval);
        var redBright = requestResponses.redBright,
            greenBright = requestResponses.greenBright,
            redLight = requestResponses.redLight;
        requestResponses.greenLight.removeClass(greenBright);
        var runInterval = setInterval(function () {
            if (requestResponses.errorCode === true) {
                redLight.toggleClass(redBright);
            }
        }, 400);
    },

    getResponse: function (serverURL) {
        $.ajax(serverURL, {
            success: function () {
                requestResponses.errorCode = false;
                requestResponses.successResponse();
            },
            error: function () {
                requestResponses.errorCode = true;
                requestResponses.errorResponse();
            },
        });
    },

    errorCode: false
}

requestResponses.init('/status');

感谢您的帮助。

【问题讨论】：

标签： javascript ajax http oop

【解决方案1】：

Javascript 是一种事件驱动语言。不要无限循环以定期检查。有很多地方可以这样做，但大多数情况下，在需要时重复调用延迟函数 (setTimeout) 或使用回调会是更好的方法。

将 setInterval 与请求一起使用，想想如果请求开始花费的时间超过您的时间间隔会发生什么。

在您的情况下，您使用 setInterval 创建了两个循环。第一个是每 1 秒运行一次的请求。除了使用 setInterval，您可以修改代码以仅在请求完成后运行 setTimeout，并在重新运行下一个请求之前执行其他任务：

function runRequest(...) {
    $.ajax(serverURL, { 
       ...
       complete: function () {
           setTimeout(runRequest, 1000);
       }
       ...
    });
}

function lightsOnOff() {

    var redBright = requestResponses.redBright,
        greenBright = requestResponses.greenBright,
        redLight = requestResponses.redLight;

    requestResponses.greenLight.removeClass(greenBright);
    if (requestResponses.errorCode === true) {
        redLight.toggleClass(redBright);
    }

}
setInterval(lightsOnOff, 400);

【讨论】：

感谢您的帮助，但我现在的问题是灯不会连续闪烁，而只会在每次请求时闪烁。我需要灯以连续的速度闪烁，而不是变慢或变快。
那么这仅对您的第二个计时器有意义。我会相应地编辑答案。
Bulent，非常感谢您的帮助，但我认为我们可能只是稍微偏离了页面。我附上了一个小提琴，所以你可以看到我的问题。我在上面测试了您的代码，但它似乎只在一定程度上起作用。如果您可以提供帮助，我会竖起大拇指并继续前进。谢谢jsfiddle.net/gtfyugg0/1
您很可能启动了多个计时器。这就是我试图向你解释的风险。无论如何，我会审查你的小提琴。
请在此处查看更改：jsfiddle.net/p6wxsy39/1。在 runOnInterval 中使用 setInterval 会导致多个计时器。您需要确保它启动一次。这个例子远非完美，但我尽量减少编辑。

【解决方案2】：

setInterval() 方法会一遍又一遍地重复，而不仅仅是一次。然后，您的错误响应处理程序将调用创建另一个setInterval() 的例程，依此类推。直到您运行了这么多进程以致出现红灯闪烁问题。

解决方案是只调用一次调用setInterval() 的逻辑。或者，更好的是，使用 setTimeout() 来调用例程。它是一次性运行的，可能更适合您使用。

【讨论】：