apply的问题.求解.....

点击以后#div是瞬间移动的.如果改成下面这样:
$("div").style.left =   i +"px";
$("div").style.top = i +"px";
timer = setTimeout(aa,130);
就正常了..
问题都在aa.apply(this)  这句身上.
请问  aa.apply(this)是怎么工作原理的?
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
#ul{ margin:0;padding:0;list-style:none;position:fixed;bottom:10px;left:50%; margin-left:-250px}
#ul li{ float:left;width:100px;height:100px;background:orange;margin-right:5px}
#div{ width:100px;height:100px;position:absolute;top:0;left:0;background:orange; }
</style>
</head> <body>

<div id="div"></div>
<script type="text/javascript">
var $ = function(id){return typeof id === 'string'?document.getElementById(id):id}
var log = function(info){ return console.log(info) }
$("div").onclick = aa;
var i = 0;
var timer;
function aa(){

log(this)

if(i < 120){
i++;
this.style.left =   i +"px";
this.style.top = i +"px";
timer = setTimeout(aa.apply(this),130);
}else{
clearTimeout(timer)
}
}
</script> </body>
</html>

解决方案 »

  1.   

    aa.apply(this)，这个表达式是函数调用。只不过在这个函数的执行过程中this指针是指向apply传递的参数。
    setTimeout(aa.apply(this),130);aa.apply会调用aa函数，而在aa函数中又回调用aa.apply，无限递归，所以是瞬移的情况，而aa.apply是有的返回值是undefinded。所以设置可以通过。
      

  2.   

    那要怎么做让使用aa.apply(this)  也能正常移动啊?
      

  3.   

    aa.apply是函数调用了，而你setTimeout是想设置定时函数调用，直接的注册函数皆可以了，不需要apply。完全不一样！
      

  4.   

    如果在setTimeout里面函数调用的话,this会指向window啊..所以我才用apply的
      

  5.   

    你不一定非要在aa中使用this才能改变style，aa被调用时this好像确实指向window，你只是需要改变div元素的style属性就可以。你可以在函数每次执行时getElementById,要不然就在函数外面getElementById获取元素存起来，在函数中使用
      

  6.   

    apply是用来改变this的作用域的，跟这个效果一样还一个call。
      

  7.   

    在javascript面向对象的时候，类之间继承的时候会用apply或者call和prototype
      

  8.   

    setTimeout('aa.apply(this);',130);应该也不行