CODEWITHSUNDEEP
javascriptsetinterval
Marco1314
Marco1314

Reputation: 25

How to clear setInterval in a Function

Hello I have a problem.

Does anyone know, why my "clearInterval" dont work after click?

"use strict";
let activeCount = 0;
let switcher = document.getElementById("counter__switcher");
let counter = document.getElementById("counter__number");

counter.innerText = "0";
let parsed = parseInt(counter.innerText);

switcher.addEventListener("click", function(e) {
    if(activeCount == 0) {
    counter.classList.toggle("d-block");
    e = setInterval(function() {
        counter.innerText = parsed++;
    },1000)
    activeCount = 1;
    console.log(activeCount)
    }
    else {
        window.clearInterval(e);
    }
})

Upvotes: 2

Views: 626

Answers (2)

Ramesh Reddy
Ramesh Reddy

Reputation: 10662

You should declare the interval outside the click handler

let switcher = document.getElementById("counter__switcher");
let counter = document.getElementById("counter__number");

counter.innerText = "0";
let parsed = parseInt(counter.innerText);
let interval;

switcher.addEventListener("click", function() {
  if (!interval) {
    counter.classList.toggle("d-block");
    interval = setInterval(function() {
      counter.innerText = parsed++;
    }, 1000)
  } else {
    clearInterval(interval);
    // setting this to undefined so that you can resume the counter
    interval = undefined;
  }
})
<div>
  <span id="counter__number"></span>
  <button id="counter__switcher">switch</button>
</div>

In your code, the e parameter will have the event and you're overwriting it with the interval, subsequent clicks will reach the else block but this time e will not have the interval it will be a new event.

Upvotes: 0

Wali Waqar
Wali Waqar

Reputation: 385

You are doing a lot of things wrong here.

Firstly the variable e has the event data stored in (like the coordinates of the click), so you shouldn't reassign it to carry another unrelated value. Secondly since you are accessing it inside a callback function, you need to keep in mind two things, first the variable containing the timeout should be global and should not be assigned some other value.

In your example the variable e containing the timeout is destroyed / garbage collected once the function finishes. And when the callback function is run again, the variable e carries the event object, wand not a timeout that can be passed to clearInterval.

To do it correctly declare a global variable using let someTimeout; and assign it the value or call clearInterval in the callback function accordingly.

Here is an edited example:

"use strict";
let activeCount = 0;
let switcher = document.getElementById("counter__switcher");
let counter = document.getElementById("counter__number");
let myTimeout;

counter.innerText = "0";
let parsed = parseInt(counter.innerText);

switcher.addEventListener("click", function(e) {
    if(activeCount == 0) {
    counter.classList.toggle("d-block");
    myTimeout = setInterval(function() {
        counter.innerText = parsed++;
    },1000)
    activeCount = 1;
    console.log(activeCount)
    }
    else {
        window.clearInterval(myTimeout);
    }
})

Upvotes: 2

Related Questions