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);
        }