clearInterval(timer)作用域是怎样的？
onemeter_sunshine
2017-12-09 19:15
我把mouseout 和mouseover事件执行函数写成独立的2个函数，但是在mouseout时间的执行函数内最前面如果不写 clearInterval(timer),mouseout事件不能正常执行，请问是什么原因？
2回答
-
- onemeter_sunshine
- 2017-12-09 22:54:59
//下面是完整代码，请帮忙看下是什么问题，谢谢！
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>js 简单动画</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
div{
background: orange;
width: 200px;
height: 200px;
position: absolute;
left: -200px;
display: inline-block;
}
span{
display: block;
background: green;
font-family: kaiti;
font-size: 14px;
text-align: center;
vertical-align: center;
line-height: 50px;
width: 35px;
height: 50px;
margin-top: 85px;
position: relative;
left: 200px;
}
</style>
</head>
<body>
<div id="div1"><span id="motion">分享</span></div>
<script type="text/javascript">
var div1=document.getElementById('div1');
var timer=null;
//不同的部分作为参数传入，如此就可以把2个类似的函数合并成一个
function startMove(){
clearInterval(timer);
timer=setInterval(function(){
if(div1.offsetLeft== 0){
clearInterval(timer);}
else
{
div1.style.left=div1.offsetLeft+1+"px";
}
},30);
}
function backMove(){
//clearInterval(timer);//如果删除这行代码，mouseout事件就不能正常进行
timer=setInterval(function(){
if(div1.offsetLeft== -200){
clearInterval(timer);}
else
{
div1.style.left=div1.offsetLeft-1+"px";
console.log(div1.style.left);
}
},30);
}
div1.addEventListener("mouseover",function(){
startMove(4,0);//前进的速度 需要可以整除200
});
div1.addEventListener("mouseout",function(){
startMove(-3,-200); //返回的速度不能大于前进的速
});
</script>
</body>
</html>
-
- ZDG
- 2017-12-09 20:57:07
你的问题就有问题，关于定时器的不应该在mouseout里面执行不了，可能你的代码有问题，clearInterval只是清除定时器，避免上个定时器对下个的影响。
JS动画效果
113923 学习 · 1443 问题
相似问题