clearInterval doesnt stop loop

Question

I have the following code

startProgressTimer: function () {
    var me = this,
        updateProgressBars = function (eventItems) {
            alert("updateProgressBars: looping");
            alert("me.eventProgressTimerId:" + me.eventProgressTimerId);
            var i = 0;
            if (eventItems.length === 0) {
                alert("internal Stop Begin")
                clearInterval(me.eventProgressTimerId);
                alert("internal Stop End")
                eventItems = [];
            }
            for (i = 0; i < eventItems.length; i++) {
                if (eventItems[i]._eventId) {
                    eventItems[i].updateProgressBar();
                }
            }
        };
    alert("Start Progress Timer");
    this.eventProgressTimerId = setInterval(function () {
        updateProgressBars([]);
    }, 10000);
}

When the function is called I would expect it to run and bottom out only it keeps on looping.

screen output

ALERT:updateProgressBars: looping
ALERT:me.eventProgressTimerId:10
ALERT:internal Stop Begin
ALERT:internal Stop End
ALERT:updateProgressBars: looping
ALERT:me.eventProgressTimerId:10
ALERT:internal Stop Begin
ALERT:internal Stop End

Any ideas

Answer 1

I suspect the problem might be that the code you don't show calls the startProgressTimer() method more than once for the same instance of whatever object it belongs to, and then within the method you store the interval id in an instance property this.eventProgressTimerId - so multiple calls overwrite the property and you'd only be able to cancel the last one.

If that's the case, a simple fix is to declare your eventProgressTimerId as a local variable within startProgressTimer().