Question

我正在对文件运行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');

感谢帮助。

Answer 1

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

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

Answer 2

Javascript是一种事件驱动语言。不要无限循环以定期检查事物。有些地方可以这样做，但大多数时候要么在需要时重复调用延迟函数（setTimeout），要么使用回调将是更好的方法。

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

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

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

清除Javascript间隔

2 个答案: