/*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>
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>
明明第一种已经可以,还要考虑第二种的方法,请记住,最好的代码是用最简单,高效的代码写出来的 timer = setTimeout((function(o){
o.show();
})(this),20)这种代码,可读不强,有玩弄语法的感觉,而且这样写是不对的,下面的才可以
timer = setTimeout((function(o){
return function(){
o.show();
}
})(this),20)以楼主现在对js的理解,不要深究为什么,先好好学学基础在研究会好点
假如我再实例一个对象.
比如:obj1.obj2
该怎么办啊?
我在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)
}
}
<!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>
这篇文章我已经回复了..你帮我看看吧