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?

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