JavaScript clearInterval（）不清除计时器

我正在尝试设置一个计时器，在经过一定时间后播放声音。分钟数可在输入字段

时间

中设置

问题是

clearInterval

功能不工作

当我将计时器设置为1分钟，然后设置为2分钟时，两个计时器都处于活动状态

如何在将计时器更改为2分钟后移除第一个计时器只有新的计时器才会播放声音

HTML:

设定计时器

JS:

function timeFunction（）{
var minuten=document.getElementById（“时间”）.value；
var sec=分钟*60；
var msec=秒*1000；
document.getElementById（“计时器”）.innerHTML=“计时器设置为”+minuten+“分钟”；
间隔时间；
var inter=setInterval（函数（）{
document.getElementById（'gong'）.play（）；}
，毫秒）；
}

如果希望只运行一次，请在工作完成后清除间隔。因此，您的函数可以这样重新编写：

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

编辑

您还可以从函数中返回

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

---

如果希望只运行一次，请在完成工作后清除间隔。因此，您的函数可以这样重新编写：

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

编辑

您还可以从函数中返回

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

---

var inter

是一个仅存在于

timeFunction

中的变量。当函数完成时，

inter

不再存在。当

clearInterval

运行时，

inter

未定义，因为您尚未为其赋值

要修复它，请在函数外部声明

inter

变量。这将允许它在多次执行

timeFunction

之间保留一个值

var inter;

function timeFunction() {
  // other code

  clearInterval(inter);

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

---

var inter

是一个仅存在于

timeFunction

中的变量。当函数完成时，

inter

不再存在。当

clearInterval

运行时，

inter

未定义，因为您尚未为其赋值

要修复它，请在函数外部声明

inter

变量。这将允许它在多次执行

timeFunction

之间保留一个值

var inter;

function timeFunction() {
  // other code

  clearInterval(inter);

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

---

你为什么不返回间歇时间

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

---

这样可以控制它的迭代次数。

为什么不返回间隔

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

---

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

在清除它之后，您正在设置

inter

。您的变量是该函数的局部变量。当函数退出时，该值将丢失。下次调用该函数时，该值将是未定义的。假设希望间隔出现多次？因为否则您将使用

setTimeout（）

，不是吗？是的，它应该像循环计时器一样工作@Pointy：谢谢，在函数外部声明inter解决了问题。清除它后，您正在设置

inter

。。您的变量是该函数的局部变量。当函数退出时，该值将丢失。下次调用该函数时，该值将是未定义的。假设希望间隔出现多次？因为否则您将使用

setTimeout（）

，不是吗？是的，它应该像循环计时器一样工作@Pointy：谢谢，在函数外部声明inter解决了问题。如果要在

setInterval（）

回调中清除计时器，它将只运行一次。在这种情况下，为什么不使用

setTimeout（）

。在这种情况下，为什么不使用

setTimeout（）

。