您当前的位置： 首页 > 学无止境 > JS经典实例 网站首页JS经典实例
javascript学习笔记-动画初探(setInterval,clearInterval)
发布时间：2018-04-05 18:27:00编辑：雪饮阅读（）
使用setInterval和定位实现动画的一个小bug
下面这个效果在按钮被点击的时候会出现元素box会向右下的方向运动，可是若连续点击按钮就会发现竟然运动速度越来越快，像是加速度一样(如果真要实现加速度，则我们只需要每次动态改变步长，而不需要这样操作)。
另外就算是不连续点击，若是等待第一次点击执行完毕后再次点击，那么即使已经运动到了我们这里设想的高度一半的位置，但是还是会继续运动不过就是后续每次点击只运动一个单位。
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style>
#box{width:100px;height:100px;position:absolute;background:pink;left:10px;top:30px;}
</style>
<script type="text/javascript">
function js(){
var box=document.getElementById("box");
var timer=setInterval(function(){
var boxLeft=box.offsetLeft;
var boxTop=box.offsetTop;
box.style.left= boxLeft +10+"px";
box.style.top=boxTop+10+"px";
if(boxTop>=(outerHeight/2)){
alert("已经运动到高度的一半"+boxTop+"px，停止运动");
clearInterval(timer);
}
},50);
}
window.onload=function(){
var bt=document.getElementById("bt");
bt.addEventListener("click",js,false);
}
</script>
</head>
<body>
<button id="bt" style="width:100%;height:20px;">测试</button>
<div id="box">aa</div>
</body>
</html>
使用setInterval和定位实现动画两个bug的解决
(1)首先就是加速度bug的解决，我们采用清除interval的方式，在每次方法执行前先清除一次，但是由于我们在方法里面用的是局部变量，所以每次来清除的时候该变量是不在的，所以需要以全局的方式清除(window.timer)。
(2)解决运行结束后再次点击仍旧运行的问题其实是setinterval在清除命令执行结束后还会运行最后一次调用(这里即最后一次50毫秒)。那么我们只需要在下个50毫秒之前就做好处理即可(我们先赋值下个50毫秒后的结果，再判断是否超过或等于目标位置，若是超过或等于目标位置，我们重新赋值回来然后调用清除函数即可，这样在同一个50毫秒中就实现了两次变化，但正因为是同一个50毫秒中实现，所以是无法看出不妥之处的)。
function js(){
var box=document.getElementById("box");
//为了解决加速度问题而做的调整
clearInterval(window.timer);
//为了解决加速度问题而做的调整
window.timer=setInterval(function(){
var boxLeft=box.offsetLeft;
var boxTop=box.offsetTop;
box.style.left=boxLeft+10+"px";
box.style.top=boxTop+10+"px";
if(boxTop>=(outerHeight/2)){
//下面这两句是为了解决一次点击事件执行结束再次点击仍旧会运动的bug而做出的调整
box.style.left=boxLeft+"px";
box.style.top=boxTop+"px";
alert("已经运动到高度的一半"+boxTop+"px，停止运动");
//为了解决加速度问题而做的调整
clearInterval(window.timer);
}
},50);
}
对于问题(2)其实该问题也可以在每次运动前判断与目标位置的距离，若该距离小于步长，则直接到达目标，否则就继续运动步长个单位的方式来解决，而且这种算法可以解决突兀的问题，上面的解法是有几率产生突兀现象的。
关键字词：javascript,动画,setInterval,clearInterval