2 bush nanjing Bush_nanjing 于 2016.03.16 22:57 提问

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,还望大神赐教

1个回答

showbo
showbo   Ds   Rxr 2016.03.17 09:10
已采纳

局部变量你的 clearInterval(timer);根本清的就不是上一次启动的计时器,而是空的计时器,所以移进移除就会有2个计时器,一个+100,一个-100,从而抖动

除非你等到动画结束完毕执行if(Math.abs(obj.offsetLeft-iTarget)<1){
clearInterval(timer);
这句清的才是内部的timer

Csdn user default icon
上传中...
上传图片
插入图片
准确详细的回答,更有利于被提问者采纳,从而获得C币。复制、灌水、广告等回答会被删除,是时候展现真正的技术了!