JavaScript clearInterval() 不清除定时器

Question

我正在尝试设置一个定时器，它会在经过一定的分钟数后播放声音。分钟数可以在输入字段 time 中设置。

问题是clearInterval功能不工作。

当我将定时器设置为 1 分钟和之后的 2 分钟时，两个定时器都处于活动状态。

如何在将定时器更改为 2 分钟后删除第一个定时器只有新定时器会播放声音？

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

如果你想运行只在你的工作完成后清除一次间隔。所以你的函数可以这样重写：

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);
}

编辑

您还可以从函数中 return inter 变量，这样您就可以在脚本逻辑需要停止间隔时使用 clearInterval。

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);

Answer 2

var inter是一个只存在于你的timeFunction中的变量。函数完成后，inter 不再存在。当 clearInterval 运行时，inter 是未定义的，因为你还没有给它赋值。

要修复它，请在函数的外部声明 inter 变量。这将允许它在 timeFunction.

的多次执行之间保留一个值

var inter;

function timeFunction() {
  // other code

  clearInterval(inter);

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

Answer 3

你为什么不return间隔，

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);

}

那你可以走了，

let intervals = timeFunction();

然后就可以这样清除了,

clearInterval(intervals);

通过这种方式您可以控制迭代次数。

JavaScript clearInterval() 不清除定时器

JavaScript clearInterval() does not clear the timer

javascript

setinterval

clearinterval