235
bigloop = setInterval(function() { var checked = $('#status_table tr [id^="monitor_"]:checked'); if (checked.index() === -1 || checked.length === 0 || ) { bigloop = clearInterval(bigloop); $('#monitor').button('enable'); } else { (function loop(i) { //monitor element at index i monitoring($(checked[i]).parents('tr')); //delay of 3 seconds setTimeout(function() { //when incremented i is less than the number of rows, call loop for next index if (++i < checked.length) loop(i); }, 3000); }(0)); //start with 0 } }, index * 3000); //loop period 

I have the code above and sometimes it is working, sometimes it is not. I am wondering if the clearInterval actually clear the timer?? because there is this monitor button that will only be disabled when it is in monitoring function. I have another clearInterval when an element called .outputRemove is clicked. See the code below:

//remove row entry in the table $('#status_table').on('click', '.outputRemove', function() { deleted = true; bigloop = window.clearInterval(bigloop); var thistr = $(this).closest('tr'); thistr.remove(); $('#monitor').button('enable'); $('#status_table tbody tr').find('td:first').text(function(index) { return ++index; }); }); 

But it was enabled for a while before it is disabled again. Will clearInterval get the program out from the setInterval function?

2
  • Maybe the problem is loopname in the second snippet? What is that? Commented May 17, 2013 at 1:11
  • opps typo. i had a function clearloop(loopname) which contains the clearInterval but to simplify it, i changed it directly in the code above. Commented May 17, 2013 at 1:13

2 Answers 2

408

Yes you can.

var i = 0; var timer = setInterval(function() { console.log(++i); // Tell JS to not run this callback anymore after i reaches 5. if (i === 5) clearInterval(timer); console.log('post-interval'); }, 200);

In this example, this timer clears when i reaches 5.


In a browser, the UI and JavaScript live in the same thread. A "sleep" would be detrimental in this setup as it would pause the thread and freeze the UI at the same time. To achieve delayed execution, timers (e.g. setTimeout() and setInterval()) queue the callback for later execution. So timers in JavaScript are not "pause right here" but more of a "run me later".

This means that what clearTimeout/clearInterval actually does is just removing that callback from queue. It's not a "stop script here" but more like "don't run this anymore". Your script might still be finishing up the execution of a stack frame, which gives an impression that clearing the timer isn't working. This is shown in the above example as the "post-interval" that's being logged even after calling clearInterval().

Sign up to request clarification or add additional context in comments.

13 Comments

i see. must it always be a local variable? in my case, i set it as global because i have outer function that will call clearInterval... and also, i have 2 setInterval at the time being and they are clashing :/
i have a question here, will it stuck at the point of clearInterval if the setInterval has stopped somewhere else / hasnt start at all?
The fact that this approach works boggles my mind. We are referencing a variable in the variable definition itself. How does this work if we are still defining what 'timer' is and then calling it as an argument to clearInterval?
@TeeJ Timers, ajax, and other async operations, etc. will start to make sense if you know how the event loop works. In this case, setInterval simply returns a timer id to timer. When at least 200ms has passed, the callback is called. By that time, you do have a timer variable with a value.
The answer is good but this comment //this will still run after clearing is ambiguous the correct comment would be : //This run ONLY ONE TIME and stop
|
4

Let's check:

let clearMyself = setInterval(() => { console.log('Hello World') clearInterval(clearMyself) }, 5) 

This outputs a single Hello World, proving that you can.

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.