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()
2
Answers
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 aclearInterval(int)
is being attempted, but it fails, becauseint
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.
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.