清除 Javascript 间隔

Question

I am running a HTTP Request to a file and depending on the response whether it be "200" or another response a success or error function is ran. This request takes place every second.

The problem I am facing is when I get lots of error responses they all run together and the last one doesn't stop eg End the interval to start a new one.

The red light begins to flash way too fast. Can anyone help me out. My code is below and I have been playing with it for a few hours now but can't seem to get to the bottom of it.

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

Appreciate the help.

Answer 1

The setInterval() method repeats itself over and over, not just one time. Your error response handler is then invoking the routine that creates another setInterval() , and so on. Until you have so many processes running that you get the flashing red light issue.

The solution is to only invoke the logic where the setInterval() call is made once. Or, even better, use setTimeout() to call the routine. It is run one-time and likely better for your use.

Answer 2

Javascript is an event driven language. Do not loop inifinitely to check things periodically. There are places to do so but most of the time either calling a delay function (setTimeout) repeatedly when needed or using a callback would be better method.

Using setInterval with request, think what happens if requests start taking longer than your interval.

In your case, you have two loops created with setInterval. First one is the request which will run every 1 sec. Instead of using setInterval, you can modify your code to run setTimeout only after a request finishes and do other tasks just before re-running the next request :

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