javascript中变量作用域的问题-问答-阿里云开发者社区-阿里云

开发者社区> 问答> 正文

javascript中变量作用域的问题

小旋风柴进 2016-06-01 14:04:20 1278
 <!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,还望大神赐教
XML JavaScript 前端开发 数据格式
分享到
取消 提交回答
全部回答(1)
  • 被纵养的懒猫
    2019-10-09 15:03:02

    var timer=null;如果你放在函数内,每次调用函数时,都相当于重新创建这个变量,并且在函数运行结束后销毁这个变量,因而这个变量的值不能保留给下一次执行的函数。所以要定义在函数外,让各次调用共享使用。

    答案来源于网络

    0 0
开发与运维
使用钉钉扫一扫加入圈子
+ 订阅

集结各类场景实战经验,助你开发运维畅行无忧

推荐文章
相似问题
推荐课程