xiaoke_code 2016-03-16 14:57 采纳率: 0%
浏览 1776
已采纳

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条回答 默认 最新

  • Go 旅城通票 2016-03-17 01:10
    关注

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

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

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题?

悬赏问题

  • ¥15 seatunnel-web使用SQL组件时候后台报错,无法找到表格
  • ¥15 fpga自动售货机数码管(相关搜索:数字时钟)
  • ¥15 用前端向数据库插入数据,通过debug发现数据能走到后端,但是放行之后就会提示错误
  • ¥30 3天&7天&&15天&销量如何统计同一行
  • ¥30 帮我写一段可以读取LD2450数据并计算距离的Arduino代码
  • ¥15 飞机曲面部件如机翼,壁板等具体的孔位模型
  • ¥15 vs2019中数据导出问题
  • ¥20 云服务Linux系统TCP-MSS值修改?
  • ¥20 关于#单片机#的问题:项目:使用模拟iic与ov2640通讯环境:F407问题:读取的ID号总是0xff,自己调了调发现在读从机数据时,SDA线上并未有信号变化(语言-c语言)
  • ¥20 怎么在stm32门禁成品上增加查询记录功能