为什么不可以停止？-慕课网

首页课程实战体系课手记专栏慕课教程

为什么不可以停止？

来源：8-4 取消计时器clearInterval()

慕雪9588076

2017-10-07 20:37

<!DOCTYPE HTML>

<html>

<head>

function clock(){

var time=new Date();

document.getElementById("clock").value = time;

}

var i =setInterval(clock,1000);

</script>

</head>

<body>

<form>

</form>

</body>

</html>

写回答关注

6回答

小肚腩era

2018-01-21 16:55:41

亲测，是慕课网的网页问题。将代码复制下来，然后放在test.html文件中
然后用任意浏览器打开，stop功能是正常的。

0 0
慕丝1416035

2017-10-22 16:31:08

赞同楼上的说法，应该和慕课网的验证机制有关，我将代码复制进JSbin里面运行，就没有发现这个不能停止的问题。

0 1
慕圣3395889

2017-10-18 13:32:43

补充：(在未刷新页面的情况下)每次提交后，setInterval()的返回值会累加，但每次只是生成两个计时器（i和i-1），因此function stop()中写成
{
clearInterval(i);
clearInterval(i-1);
}
比较恰当;

0 1
慕圣3395889

2017-10-18 13:10:15

分享一下自己debug的经历：
我最开始也遇到了和你一样的问题，无论是把clearInterval(i)写在onclick里，还是封装在function里都无法停止。
后来通过查看setInterval()的返回值发现，返回值从1开始自增（你可以通过点击自动运行按钮发现），但每次提交后，得到的结果是2 4 6...，因此是每次提交后都会出现两个计时器（可能和慕课网的提交机制有关）,也就是说，你调用了clearInterval(i)只关闭了一个计时器，还有前一个计时器在调用clock函数。
例：在setInterval()方法下写一行document.write("id:"+i);第一次提交后页面打印出id=2；此时你clearInterval(i)关闭了返回值为2的计时器，但事实是有返回值为1的计时器生成了.为了能关闭到所有计时器，我写了一个for循环，遍历关闭返回值从1到i的计时器，同时用一个函数封装起来让Stop按钮调用，然后你会发现确实停止了
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>计时器</title>
<script type="text/javascript">
function clock(){
var time=new Date();
document.getElementById("clock").value = time;
}
var i = setInterval("clock()",1000);

document.write("id:"+i);
function stop(){
for(var j =1;j<=i;j++){
clearInterval(j);
}
}
</script>
</head>
<body>
<form>
<input type="text" id="clock" size="50" />
<input type="button" value="Stop" onclick="stop()" />
</form>
</body>
</html>
结论：个人认为这跟慕课网提交按钮的实现有关系（学习前面课程同时打开过两个新窗口的同学举手?）

0 1
丶听风思雨

2017-10-09 14:07:09

代码是没有问题的，可能是浏览器的问题，你提交后刷新一下再试试，提交后内容是保存的！

0 1
昔丷年

2017-10-07 22:13:45

你根本就没有停止定时器啊，要加
clearInterval(i)
才停的

0 0