黑马程序员技术交流社区
标题:
setInterval和clearInterval——setInterval的问题解决
[打印本页]
作者:
sangwentao
时间:
2016-6-2 19:38
标题:
setInterval和clearInterval——setInterval的问题解决
js中 setInterval函数用于设置间隔执行某函数，函数执行方式为：interval=setInterval("func()",1000)。其中1000指1000毫秒。在func()中可以设置，根据条件调用clearInterval(interval)，停止间隔执行。但是会有一个问题，就是多次调用setInterval函数会不断触发func()的间隔执行，而后来的执行会使interval获得的句柄将前面的句柄覆盖。这样就没办法关闭前面的间隔执行了。解决的办法是用一个数组记录setInterval的句柄。将这个数组中的元素作为clearInterval的输入参数。
<!DOCTYPE html>
<html>
<head>
<title>f:test.html</title>
<meta charset="utf-8" />
</head>
<body>
<input id="text" type="text" value="1" />
<input id="add" type="button" value="add" />
<input id="stop" type="button" value="stop" />
</body>
</html>
<script type="text/javascript">
var val=1;
var interval=new Array();
var text=document.getElementById('text');
var adding=document.getElementById('add');
var stoping=document.getElementById('stop');
function addone(){
val++;
text.value=val;
}
function addinterval(){
add=setInterval('addone()',1000);
interval.push(add);
}
function stop(){
clearInterval(interval[0]);
interval.shift();
}
adding.onclick=addinterval;
stoping.onclick=stop;
</script>
代码效果：
add使数字隔一秒加一，stop使加一操作停止。若多次按add，则会使数字增加的很快（因为有多个隔一秒加一的操作执行），按stop停止最开头的一个隔一秒加一操作。
欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/)
黑马程序员IT技术论坛 X3.2
