主要问题:多次点击开始定时器，会开启多个不同的定时器，会改变初始移动
解决方法：在定时器函数内首部添加一个清除定时器，使得每一次点击都清除上次定时器，并重建一个定时器
代码示例：
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div{
height:40px;
width:40px;
background-color: orange;
position: absolute;
}
</style>
</head>
<body>
<button class="start">开始</button>
<button class="end">结束</button>
<div class="box">
</div>
<script>
var box=document.querySelector(".box");
var start=document.querySelector(".start");
var end=document.querySelector(".end");
var timer=null;
start.onclick=function(){
//解决多次点击加大移动距离的问题
//第一次点击timer无值，第二次点击结束上一次timer，又重建一个timer继续移动
clearInterval(timer);
timer=setInterval(
function()
{
var x=box.offsetLeft;
x+=100;
box.style.left=x+"px";
}
,1000);
}
end.onclick=function()
{
clearInterval(timer);
}
</script>
</body>
</html>
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
