                        课程
                    
                        /前端开发
                        
                            /JavaScript
                        
                        /JavaScript进阶篇

为什么不可以停止？

<!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>

慕雪9588076

2017-10-07

源自：JavaScript进阶篇 8-4

关注问题我要回答

1381

操作

收起

6 回答

小肚腩era
2018-01-21

亲测，是慕课网的网页问题。将代码复制下来，然后放在test.html文件中

然后用任意浏览器打开，stop功能是正常的。

0 回复有任何疑惑可以回复我~

收起回答

慕丝1416035
2017-10-22

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

1 回复有任何疑惑可以回复我~

收起回答

慕圣3395889
2017-10-18

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

{

clearInterval(i);

clearInterval(i-1);

}

比较恰当;

1 回复有任何疑惑可以回复我~

收起回答

慕圣3395889
2017-10-18

分享一下自己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>

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