问题描述
- javascript中变量作用域的问题
-
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title>分享到</title> <style type='text/css'> *{ margin:0; padding:0; } li { list-style: none; text-align: center; margin-top:3px; } a{ text-decoration: none; } #fenXiangArea{ width:100px; height:200px; position:absolute; top:40%; left:-100px; background-color: #ccc; } #fenxiang{ width:20px; height:70px; position:absolute; top:35%; left:100px; background-color: yellow; } </style> <script type="text/javascript"> var timer=null; //开始运动的逻辑 单个物体的运动 function startMove(obj,iTarget){ var iSpeed=0; clearInterval(timer); timer=setInterval(function(){ obj.offsetLeft<iTarget?iSpeed=1:iSpeed=-1; if(Math.abs(obj.offsetLeft-iTarget)<1){ clearInterval(timer); obj.style.left=iTarget+'px'; } else{ obj.style.left=obj.offsetLeft+iSpeed+'px'; } },30); } window.onload=function(){ var fenXiangArea=document.getElementById('fenXiangArea'); fenXiangArea.onmouseover=function(){ startMove(fenXiangArea,0); } fenXiangArea.onmouseout=function(){ startMove(fenXiangArea,-100); } } </script> </head> <body> <div id='bianxian' style='border:1px solid blue;width:1px;height:400px' ></div> <div id='fenXiangArea' > <ul> <li><a href='javascript:;'/>微信</li> <li><a href='javascript:;'/>QQ</li> <li><a href='javascript:;'/>豆瓣</li> <li><a href='javascript:;'/>知乎</li> <li><a href='javascript:;'/>微博</li> <li><a href='javascript:;'/>网易</li> <li><a href='javascript:;'/>淘宝</li> <li><a href='javascript:;'/>朋友圈</li> </ul> <div id='fenxiang'>分享到</div> </div> </body> </html>各位大神注意 一下 我这里的 var timer=null;timer是全局变量
但是我把timer改成局部变量 就是在startMove（）方法里面定义了这个变量 ‘ 代码就会出现抖动！！function startMove(obj,iTarget){ var iSpeed=0; var timer=null; clearInterval(timer); timer=setInterval(function(){ obj.offsetLeft<iTarget?iSpeed=1:iSpeed=-1; if(Math.abs(obj.offsetLeft-iTarget)<1){ clearInterval(timer); obj.style.left=iTarget+'px'; } else{ obj.style.left=obj.offsetLeft+iSpeed+'px'; } },30); }初学JavaScript，还望大神赐教
解决方案
局部变量你的 clearInterval(timer);根本清的就不是上一次启动的计时器，而是空的计时器，所以移进移除就会有2个计时器，一个+100，一个-100，从而抖动
除非你等到动画结束完毕执行if(Math.abs(obj.offsetLeft-iTarget)<1){
clearInterval(timer);
这句清的才是内部的timer
时间： 2024-08-07 05:19:02