javascript 定时器和变量相关 忘好心人前辈帮忙看一下。

 <!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <style type="text/css">
            div{
                width:20px;
                height:20px;
                background-color: red;
                position: absolute;
                margin-top: 10px;
                float:left;
                top:0;
            }
        </style>        
    </head>
    <body>
    <script type="text/javascript">
    window.onload = function (){       
        var len = 100,
            num = 0,
            num1 = 0,
            timer = null,
            timer1 = null,
            off = true,
            aDiv = document.getElementsByTagName('div');
            function getStyle (obj,attr){
                return obj.currentStyle? obj.currentStyle[attr] : getComputedStyle(obj,null)[attr];
            };

            for(var i = 0 ; i< len ; i++){
                document.body.innerHTML += "<br><div></div><br>"
            };
            for(var i = 0 ; i<aDiv.length ; i++){
                aDiv[i].style.left = i*30+'px';
            }


            document.onclick = function (){  

 /*为何将num = 0,timer = null申明为局部变量啦之后 红色方块就恢复正常。 
 (就是快速双击的时候不会出现div上下分离了,而是无论如何点击都是按照重第一个块开始按预期的走(就是按局部变量那种)。
 我尝试着去除var 关键字,变成全局变量后就出现不正常。
 问题说明:这两种变化我不知道是什么原因造成的!我觉得这里声明局部或者全局变量的作用是一样的。都是为了重置~)希望有热心人解答一下,我弄好久没弄出来...*/

                     num = 0;                   
                     timer = null;
                    if(off ){
                      lastFn(500);
                      off = false;              
                    }else{
                      lastFn(0);
                      off = true;                         
                    };
                    function lastFn (target){
                        clearInterval(timer);
                        timer = setInterval(function(){
                             doMore(aDiv[num],'top',100,target);
                             num++;
                             if(num === len){
                               clearInterval(timer);
                             };                         
                        },30);                         
                    };
            };  

               function doMore (obj,attr,dir,target,endFn){
                    dir = parseInt(getStyle(obj,attr)) < target? dir :-dir;
                    clearInterval(obj.timer);
                    obj.timer = setInterval(function (){
                       var iSpeed = parseInt(getStyle(obj,attr))+dir;
                        if(iSpeed > target && dir > 0 || iSpeed < target && dir < 0){
                            iSpeed = target;
                            endFn && endFn();
                        };
                        obj.style[attr] = iSpeed+'px';
                    },30);
               };        
    };
    </script>

    </body>
</html>
查看全部
a1104381972
Mis-小甜
2015/07/27 01:40
  • 局部变量
  • 全局变量
  • javascript
  • 点赞
  • 收藏
  • 回答
    私信

2个回复