JavaScript clearInterval() 不清除计时器

Question

I'm trying to set up a timer that will play a sound after a certain amount of minutes have passed. The number of minutes can be set in the input field time .

The problem is clearInterval function is not working.

When I set a timer to let's say 1 minute and afterward to 2 minutes, both timers are active.

How to remove the first-timer after changing the timer to 2 minutes only the new one will play a sound?

HTML:

<input id="time" /> 
<button onclick="timeFunction()">
    set Timer
</button>

<p id ="timer"></p>  

JS:

function timeFunction() {

var minuten = document.getElementById("time").value;
var sec = minuten * 60;
var msec = sec * 1000;

document.getElementById("timer").innerHTML = "Timer set to " + minuten + " minutes";

clearInterval(inter);

var inter = setInterval(function(){
   document.getElementById('gong').play(); }
    ,msec);

}

Answer 1

var inter is a variable that only exists in your timeFunction . When the function finishes, inter does not exist anymore. When clearInterval runs, inter is undefined, because you haven't assigned it a value yet.

To fix it, declare the inter variable outside of your function. This will allow it to keep a value between multiple executions of timeFunction .

var inter;

function timeFunction() {
  // other code

  clearInterval(inter);

  inter = setInterval(function(){
    document.getElementById('gong').play();
  }, msec);
}

Answer 2

Why don't you return the interval,

function timeFunction() {

var minuten = document.getElementById("time").value;
var sec = minuten * 60;
var msec = sec * 1000;

document.getElementById("timer").innerHTML = "Timer set to " + minuten + " minutes";

return setInterval(function(){
   document.getElementById('gong').play(); }
    ,msec);

}

then you could go,

let intervals = timeFunction();

then you can clear it like so,

clearInterval(intervals);

this way you control how many times it iterates.

Answer 3

If you want this to run only once clear the interval after your work has been done. So your function can be re-written like this:

function timeFunction() {
  var minuten = document.getElementById("time").value;
  var sec = minuten * 60;
  var msec = sec * 1000;
  document.getElementById("timer").innerHTML = "Timer set to " + minuten + " minutes";
  var inter = setInterval(function() {
    document.getElementById('gong').play();
    clearInterval(inter);
  }, msec);
}

EDIT

You can also return inter variable from your function so you can use clearInterval whenever your script's logic needs the interval to stop.

function timeFunction() {
  var minuten = document.getElementById("time").value;
  var sec = minuten * 60;
  var msec = sec * 1000;
  document.getElementById("timer").innerHTML = "Timer set to " + minuten + " minutes";
  var inter = setInterval(function() {
    document.getElementById('gong').play();
  }, msec);
  return inter;
}

let intv = timeFunction();

// rest of your javascript 
// ...

clearInterval(intv);