How to clear setInterval function?

Question

`#bulb{width:100px; height: 100px; border: 1px #333 solid; margin: 20px;}
    #bulb.active{background: yellow;}`

<button type="button" id="toggle">toggle</button>
 <button type="button" id="getState">getState</button>
 <button type="button" id="off">off</button>
 <button type="button" id="on">on</button>
 <button type="button" id="blink">blink</button>

 <div id="bulb"></div>


    var $ = function(el){
            return document.getElementById(el);
        };
        var bulb = $('bulb');
        var lightBulbAPI = {
            toggle : function(){
                if(bulb.className == 'active'){
                    bulb.className = '';    
                }else{
                    bulb.className = 'active';
                }
            },
            getState : function(){
                if(bulb.className == 'active'){
                    console.log("ON");  
                }else{
                    console.log("OFF"); 
                }
            },
            off : function(){
                if(bulb.className == 'active'){
                    bulb.className = '';    
                }
                bulb.className = '';
                clearInterval();
            },
            on : function(){
                bulb.className = 'active';
            },
            blink : function(){
                setInterval(function(){
                    console.log(this.off);
                    if(bulb.className == 'active'){
                        bulb.className = '';    
                    }else{
                        bulb.className = 'active';
                    }
                }, 300);
            }
        };

        $('on').addEventListener('click', lightBulbAPI.on);

        $('off').addEventListener('click', lightBulbAPI.off);   

        $('getState').addEventListener('click', lightBulbAPI.getState); 

        $('toggle').addEventListener('click', lightBulbAPI.toggle);

        $('blink').addEventListener('click', lightBulbAPI.blink);

`clearInterval();` certainly won't work. Consider reading [the documentation](https://developer.mozilla.org/en-US/docs/Web/API/Window.clearInterval). — cookie monster, Jun 17 '14 at 03:52
@cookiemonster Not sure if sarcasm... or serious. I'm going to go with/hope it's sarcasm. — Joseph Marikle, Jun 17 '14 at 03:54
@JosephMarikle: Entirely serious. Which part should be sarcastic? — cookie monster, Jun 17 '14 at 03:55
...to be clear, that's a copy/paste from his code, and it most definitely won't clear any interval. — cookie monster, Jun 17 '14 at 03:56
@JosephMarikle - I think the comment should be an answer - it is clear in the documentation that an ID should be provided — Ed Heal, Jun 17 '14 at 03:58
@cookiemonster ah! that makes it so much more clear. XD I thought you were sarcastically stating that the function with the name "clearInterval" couldn't possibly be what OP was looking for. I didn't see it in the code at first. — Joseph Marikle, Jun 17 '14 at 03:58
@JosephMarikle: Oh OK. I should have explained it better up front. :-) — cookie monster, Jun 17 '14 at 03:59

score 0 · Answer 1 · answered Jun 17 '14 at 04:00

0

Try this:

var timer,
    /* ... */,
    api = {
        /* ... */
        off : function(){
            /* ... */
            clearInterval(timer);
        },
        /* ... */
        blink : function(){
            timer = setInterval(/* ... */);
        }
    };
/* ... */

answered Jun 17 '14 at 04:00

Oriol

274,082
63
437
513

1

does that keep it local to the object or would it perhaps be better to do this? `this.timer = setInterval(function(){...` and `clearInterval(this.timer)`. – Joseph Marikle Jun 17 '14 at 04:01
@JosephMarikle That's another option. I didn't use it because I didn't want to pollute the object because it's an API. And I was assuming a closure to avoid `timer` become global and keeping it local. – Oriol Jun 17 '14 at 04:06

How to clear setInterval function?

1 Answers1