Can clearInterval() be called inside setInterval()?

Question

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?

Jaquelinejaquelyn

Maybe the problem is loopname in the second snippet? What is that? – Modillion

opps typo. i had a function clearloop(loopname) which contains the clearInterval but to simplify it, i changed it directly in the code above. – Jaquelinejaquelyn

Answer 1

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().

Ell

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 :/ – Jaquelinejaquelyn

i have a question here, will it stuck at the point of clearInterval if the setInterval has stopped somewhere else / hasnt start at all? – Jaquelinejaquelyn

@Jaquelinejaquelyn updated the answer, and that's no. The function that runs per interval finishes before it's never run again. However, on the case of your question, you've got multiple timers. I suggest you rethink your approach. – Ell

Okay thank you for clarifying! :) then it must be some logic errors in my program. – Jaquelinejaquelyn

Hijoseph, The statement executing its part of your function, which calling by your timer after defined interval. So, when you clearing your interval by calling clearInterval(timer), it is absolute that timer has been already cleared, but the following statement, console.log('post-interval'); //this will still run after clearing, of function(), has to executed. – Shoer

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? – Koppel

@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. – Ell

Thanks @Ell That makes sense and the video helped alot. The function inside setInterval was just a callback that gets pushed to a task queue. So by the time that callback is executed it has a reference to the 'timer' id? – Koppel

I would not call the variable timer,but rather id. JS is a crazy language because in other (compiled) languages as @user.. points out, you cannot reference a local variable from outside inside a function. – Kosse

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 – Gothicize

Does is it possible reference with this instead of the name of variable ? – Fumarole

@Gothicize the comment is not ambiguous, the timer STILL RUNS on every interval difference. I have no idea where you got the only once idea from. – Glorify

@Glorify Possibly it is due to my little knowledge of the English language. To my understanding, still run, means it does not stop. still run vs run once or one-off or one more – Gothicize

Answer 2

Let's check:

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

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

Postdiluvian