Question 199064 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – ClearInterval() although with ID is not working

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()
Tags:

2

Answers


  1. 0

    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">
    Login or Signup to reply.
  2. 0

    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.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search