reset interval doesn't work in javascript

Question

clearInterval(interval)
var interval = setInterval(function(){
   console.log('running')
},1000);

I have above code in a click event, the console.log('running') turn out to be trigger multiple times when I execute above code, why? I already clear the interval first before run the setInterval.

@RoryMcCrossan if I put clearInterval after setInterval, means it will be ended at not running. — Maria Jane, Aug 18 '16 at 14:30
@Drkdra no, I want to create ONE setInterval. My problem is it multiples because above code block is within a click event where user can click multiple times, that's why I try to clear the running setInterval to try to reset. — Maria Jane, Aug 18 '16 at 14:31
I don't think you understand what an interval is. If you want something to run once, after a 1 second delay, then simply change `setInterval` to `setTimeout`, as alluded to by @Drkdra, above. Forget clearing and using a variable. A timeout will execute once, after a given delay, and an interval executes until stopped, with the given delay. — Reinstate Monica Cellio, Aug 18 '16 at 14:32
@Archer think of this. when a user click something an item is added into an array, and execute setInterval, says every 5 sec the first item in the array got removed. How setTimeout come into picture? I want to continue to remove item from the array as users will add stuff into the array. — Maria Jane, Aug 18 '16 at 14:35
@MariaJane then you need to clarify your question. As it is, anyone will tell you to use setTimeout instead. — Drkdra, Aug 18 '16 at 14:37
This is clearly an [XY Problem](http://meta.stackexchange.com/questions/66377/what-is-the-xy-problem) You need to tell us what you are trying to achieve overall, since that response has details in it that change the question completely. — Reinstate Monica Cellio, Aug 18 '16 at 14:38
@Archer http://stackoverflow.com/questions/39021371/queuing-using-setinterval-in-javascript — Maria Jane, Aug 18 '16 at 14:53

score 2 · Accepted Answer · edited May 23 '17 at 12:14

Assuming your code looks something like this:

$('#someButton').on('click', function() {
    clearInterval(interval)
    var interval = setInterval(function(){
        console.log('running')
    },1000);
});

then the problem you're having is all to do with scope. The second time your button is clicked, the function will run, but will have no reference to any variables created inside the function the first time it ran. (Try adding console.log(interval) as the first line in the click handler function). To solve this, you'll need to keep a reference to interval somewhere that the click handler can access it. For example:

var interval = null;

$('#someButton').on('click', function() {
    clearInterval(interval)
    interval = setInterval(function(){
        console.log('running')
    },1000);
});

See What is the scope of variables in JavaScript? for some examples of scope in action.

score 0 · Answer 2 · answered Aug 18 '16 at 14:50

Ok, now I understand your problem. You need to declare interval in a higher scope (global if needed). Your problem is the interval varible is declare inside the click function and therefor it's a local varible, you need to keep it elsewhere to access the reference in order to clear it.

Try this, and do not put all this in the click function, put it on the same level with the click function should work.

var interval;

function doInterval() {
    if (interval != undefined) clearInterval(interval);
    interval = setInterval(function(){
       console.log('running');
    },1000);
}

P/S: you should edit your question to clarify the question.

reset interval doesn't work in javascript

2 Answers2