ClearInterval() although with ID is not working

Question

I have a code when a timer is shown and removed using 2 functions repeatedly by using SetInterval. However when the timer is finished I am trying to clear the SetInterval With ClearInterval but this is not working. When setInterval and ClearInterval set outside gettimer function the they work properly as well. Can someone help?


>declaring const M1 and M2
    let M1, M2
>functions
function ShowScrollBar(){
    ScrollContainer.classList.add('show-scroll-container')
}

**function TimeShowscrollBar(){
    M1 = setInterval(ShowScrollBar,3000)
}**

function RemoveScrollBar(){
    ScrollContainer.classList.remove('show-scroll-container')
}

**function TimeRemovecrollBar(){
    M2 = setInterval(RemoveScrollBar,6000)
}**

**function ClearTimeShowscrollBar(){
    clearInterval(M1)
}

function ClearTimeRemovecrollBar(){
    clearInterval(M2)
}**

function gettimer(){
const futureTimems = ClosingDate.getTime()
const presentTimems = new Date().getTime()
const RemainingTimeSec = (futureTimems-presentTimems)/1000
if(RemainingTimeSec>=0){    
    window.addEventListener('DOMContentLoaded', function(){
        popup.classList.add('showpopup')
        popup.classList.remove('popup')
       
    })
}

ClosePopupBtn.addEventListener('click',function(){
    popup.classList.remove('showpopup')
    popup.classList.add('popup')
>setInterval containing functions working properly
    **TimeShowscrollBar()
    TimeRemovecrollBar()**
       
})

if (RemainingTimeSec<=0){
    clearInterval(countdown)
>Functions with clearInterval not working here
    **ClearTimeShowscrollBar()
    ClearTimeRemovecrollBar()**
    timing.forEach(function(contenu, MVindex){
        contenu.innerHTML = '00'
    })
    timingS.forEach(function(contenu, MVindex){
        contenu.innerHTML = '00'
    })
    popup.classList.remove('showpopup')
    popup.classList.add('popup')  
}
}
let countdown = setInterval(gettimer,1000)
gettimer()

You are creating many non-reusable intermediate one-liner functions. that makes the code hard to read.... — Alexander Nenashev, Jul 02 '23 at 16:38
Please make a testable snippet that shows the problem. You can use the `<>` button in the question editor. — James, Jul 02 '23 at 17:24
with all the `>` and `**` in random places, I can't imagine this works at all. — Garr Godfrey, Jul 02 '23 at 18:06

score 1 · Answer 1 · answered Jul 02 '23 at 18:13

You have quite a bit going on here that will cause a lot of problems.

Ask yourself, what happens if the users clicks twice on the Close button? Three times? It will call setInterval for each click, but you only ever clear one of them, maybe, in the future.

Then, what happens if you call addEventListener multiple times? You create multiple listeners, so clicking the button will act like it was clicked multiple times.

At best, when it counts down to zero, you are only clearing 1 of several intervals you have started.

EDIT: In case it isn't clear, you create a new listener every second in gettimer, so for every second the page has been loaded, you will create intervals.

DON'T CREATE MULTIPLE LISTENERS. They don't remove themselves or stop listening just because you add another one or they handle a single event.

Godfrey you are absolutely right! I don't know why I put the eventListener inside gettimer() function. So I just took it out from there and now working perfectly fine! Thank you very much problem solved! Also for the > and * I am quite new with Stack Overflow don't really know how to use it correctly just like Javascript as well:-) — Mehdi, Jul 02 '23 at 20:06

score 0 · Answer 2 · answered Jul 02 '23 at 18:03

Your mistake is that you attempt to clear an interval before it is being set. See the snippet below, where I start by doing the same type of an attempt in order to show you that the int variable I create for the interval does not exist before it is being defined, hence, in the try-catch block a clearInterval(int) is being attempted, but it fails, because int does not exist yet.

Next, I set an interval and store its id into a variable called int. Essentially it will run a function each second.

But the function increments a numeric input value until it reaches 10 and then clears the int interval, which succeeds at this point, because it was properly initialized.

As a user, you will see an error message in your console and a counter increasing a value each second until it reaches 10.

try {
    clearInterval(int);
} catch (err) {
    console.log("clearing the interval errored out");
}
let int = setInterval(function() {
    if (++document.getElementById("foo").value === 10) clearInterval(int);
}, 1000);

<input type="number" id="foo" value="1">

there are more problems than that. it would seem to be adding a `click` listener multiple times, so on a click, it will create multiple intervals, and only 1 of them gets cleared. — Garr Godfrey, Jul 02 '23 at 18:10

ClearInterval() although with ID is not working

2 Answers2