/*timer = setTimeout(function(){
obj.show();
},20)*/ timer = setTimeout((function(o){
o.show();
})(this),20)
关键是这2段代码.
要是换成第一种就正常了.
要是第二种就不正常了.
点击会一瞬间到目的地,
这里有闭包.
但有什么解决办法呢?
<!DOCTYPE html>
<html>
 <head>
  <title> New Document </title>
  <style type="text/css">
#test{width:100px;height:100px;position:absolute;top:50px;left:0px;background:orange;}
  </style>
 </head> <body>
<button id="btn">按钮</button>
<div id="test"></div>

<script type="text/javascript">
var $ = function(id){return document.getElementById(id)};
function autoScroll(id){
this.id = typeof id === "string"?$(id):id;
this.num = 0;
var to = null;
var timer = null;
this.show = function(){
if(this.id.offsetLeft< 600){
this.num++;
this.id.style.left = this.num+"px";
/*timer = setTimeout(function(){
obj.show();
},20)*/
timer = setTimeout((function(o){
o.show();
})(this),20)
}else{
clearTimeout(timer)
}
}
}
var obj = new autoScroll("test");
$("btn").onclick = function(){
obj.show()
}
</script> </body>
</html>

解决方案 »

  1.   

    楼主都知道第二种方法不行了。为什么还要问呢?
    明明第一种已经可以,还要考虑第二种的方法,请记住,最好的代码是用最简单,高效的代码写出来的 timer = setTimeout((function(o){
                o.show();
    })(this),20)这种代码,可读不强,有玩弄语法的感觉,而且这样写是不对的,下面的才可以
    timer = setTimeout((function(o){
          return function(){
                o.show();
          }
          })(this),20)以楼主现在对js的理解,不要深究为什么,先好好学学基础在研究会好点
      

  2.   

    如果是第一种的话,
    假如我再实例一个对象.
    比如:obj1.obj2
    该怎么办啊?
      

  3.   

    你就是那天问“高手帮我看看怎么让这2个对象互不相关?”的人吧?
    我在2楼不是给出答案了么,,用
    var self = this;绑定一下this上下文,方便下面调用this.show = function(){
                            if(this.id.offsetLeft< 600){
                                this.num++;
                                this.id.style.left = this.num+"px";
                                /*timer = setTimeout(function(){
                                    obj.show();
                                },20)*/
                                timer = setTimeout((function(o){
                                    o.show();
                                })(this),20)
                            }else{
                                clearTimeout(timer)
                            }
                        }改成
    this.show = function(){
                         var self = this;
                            if(this.id.offsetLeft< 600){
                                this.num++;
                                this.id.style.left = this.num+"px";
                                timer = setTimeout(function(){
                                    self.show();
                                },20)
                              
                            }else{
                                clearTimeout(timer)
                            }
                        }
      

  4.   


    <!DOCTYPE html>
    <html>
     <head>
      <title> New Document </title>
      <style type="text/css">
        #test{width:100px;height:100px;position:absolute;top:50px;left:0px;background:orange;}
      </style>
     </head> <body>
    <button id="btn">按钮</button>
        <div id="test"></div>
        
            <script type="text/javascript">
                    var $ = function(id){return document.getElementById(id)};
                    function autoScroll(id){
                        this.id = typeof id === "string"?$(id):id;
                        this.num = 0;
                        var to = null;
                        var timer = null;
                        this.show = function(){
                            if(this.id.offsetLeft< 600){
                                clearTimeout(this.timer)
                                this.num++;
                                this.id.style.left = this.num+"px";
                                this.timer = setTimeout((function(o){
                                    return function(){
                                     o.show();
                                    }
                                })(this),20)
                            }else{
                                clearTimeout(this.timer)
                            }
                        }
                    }
                    var obj = new autoScroll("test");
                    $("btn").onclick = function(){
                        obj.show()
                    }
            </script> </body>
    </html>
      

  5.   

    http://topic.csdn.net/u/20111107/12/c726e8ad-46ac-4697-9223-dce88a167488.html 
    这篇文章我已经回复了..你帮我看看吧