为什么clearInterval只能使用一次?
问题描述:
我有这样的例子:“停止时间”为什么clearInterval只能使用一次?
<p id="test"></p>
<button onClick="clearInterval(myVar)">Stop time!</button>
<button onClick="setInterval(myTimer, 1000)">Start time!</button>
<script>
var myVar = setInterval(myTimer, 1000);
function myTimer() {
var d = new Date();
document.getElementById('test').innerHTML = d.toLocaleTimeString();
}
</script>
当我点击这是第一次,它应该如此,但我点击“开始时间!”后我无法停止计时器了。为什么会发生这种情况以及如何解决这个问题?
谢谢。
答
看看这段代码
<button onClick="setInterval(myTimer, 1000)">Start time!</button>
它不工作,因为你不设置新的计时器给变量。它不知道应该在那里设置新值。
不是内嵌代码的粉丝,但这样的工作
<button onClick="myVar = setInterval(myTimer, 1000)">Start time!</button>
一个更好的设计是这样的:
(function() {
var timer;
function myTimer() {
var d = new Date();
document.getElementById('test').innerHTML = d.toLocaleTimeString();
}
function startTimer() {
stopTimer(); //make sure timer is not already running
timer = setInterval(myTimer, 1000); //start new timer
}
function stopTimer() {
if (timer) clearInterval(timer);
timer = null;
}
document.getElementById("stop").addEventListener("click", stopTimer);
document.getElementById("start").addEventListener("click", startTimer);
startTimer();
}());
<p id="test"></p>
<button id="stop">Stop time!</button>
<button id="start">Start time!</button>
答
试试这个..
<p id="test"></p>
<button onClick="clearInterval(myVar)">Stop time!</button>
<button onClick="startTimer()">Start time!</button>
<script>
var myVar;
function startTimer() {
myVar = setInterval(myTimer, 1000);
}
function myTimer() {
var d = new Date();
document.getElementById('test').innerHTML = d.toLocaleTimeString();
}
</script>
我不明白为什么只给一个变量赋值。它是否有变量,为什么? – super11
因为原始变量保存了返回的区间ID。设置新的时间间隔与您调用它的原始时间没有任何关系。 – epascarello
变量与任何事物无关。这里没有关系。 setInterval返回一个数字标识,表示对该间隔的引用。 JavaScript引擎不知道你在回归的时间间隔中做了什么。你可以存储它(就像你用myVar做的一样),或者你可以忽略它(就像你用onclick做的那样)。与调用方法并使其生成一个id没有任何关系。您可以调用相同的时间间隔100次,并且它们都会生成一个ID,并且这些时间间隔中的任何一个都不会与另一个时间间隔相关联。他们都是分开的。 – epascarello