Javascript setInterval clearInterval Simple Example Not Working Explained?

Question

I have a very simple JS setInterval and clearInterval example that doesn\'t work. There has got to be an underlying reason why it does not work and I would like to know why

Answer 1

var automessage;

function turnON() { //executed by onclick event A 
    automessage = setInterval(function(){ something() }, 2000);
}
function turnOff() { //executed by onclick event B
    clearInterval(automessage);
}
function something() {
    //pulls instant messages
}

This code should work. Yours isn't working because in the context of the turnON function you are always initializing a new variable called automessage, which obfuscates the global one. By not using var you will be overriding the automessage global variable.

automessage is a global variable, so it is editable from any other script. Since, IMHO, it shouldn't be possible, I'd recommend you to use a closure to encapsulate and make private the automessage variable(something like a modular pattern should help you, see below).

var buttonModule = (function() {
    var _automessage;
    function turnON() { //executed by onclick event A 
        _automessage = setInterval(_something, 2000);
    }
    function turnOFF() { //executed by onclick event B
        clearInterval(_automessage);
    }
    function _something() {
        //pulls instant messages
    }
    return {
        turnON: turnON,
        turnOFF: turnOFF
    };
})();

Then you can use it this way: buttonModule.turnON, buttonModule.turnOFF inside your click handlers.

Answer 2

change

var automessage = setInterval(function(){ something() }, 2000);

to

automessage = setInterval(function(){ something() }, 2000);

in turnON()

Answer 3

automessage is declared twice - as a global variable and as a local variable. try:

function turnON() //executed by onclick event A
{
    automessage = setInterval(function(){ something() }, 2000);
}