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

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 2

你为什么不返回间隔，

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

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

Answer 3

如果您希望此操作仅运行一次，请在工作完成后清除间隔。所以你的函数可以像这样重写：

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