麻烦大神解释下以下代码中var timer=null为什么不能放在函数里面。

Question

<script>
   window.onload=function ()
   {
       var odiv=document.getElementById('div1');

       odiv.onmouseover=function ()
       {
           StarMove(0);
       }

       odiv.onmouseout=function ()
       {
           StarMove(-100);
       }
   }
//var timer=null;  timer为什么一定要放在这里，而不能放在starmove函数里面

   function StarMove(iTarget)
   {
       var odiv=document.getElementById('div1');
       var timer=null; //放这里的运行结果有问题
       clearInterval(timer);
       timer=setInterval(function (){
           var iSpeed=0;

           if(odiv.offsetLeft<iTarget)
           {
               iSpeed=10;
           }
           else
           {
               iSpeed=-10;
           }

           if(odiv.offsetLeft==iTarget)
           {
               clearInterval(timer);
           }
           else
           {
               odiv.style.left=odiv.offsetLeft+iSpeed+'px';
           }
       }, 30);
   }

Answer 1

Javascript中function代表的是对象, 你放在外面是全局变量,你要是想在里面使用,每次调用一次StartMove是不是timer就会初始化为null呢？当然就会出现问题了...

Answer 2

当timer=null放在外面的时候。全部setInterval，也就是每一次调用StarMove，共用一个timer变量来作原来定时器，clearInterval(timer)就可以清除掉之前的那一个定时器，再重新赋值给定时器。当timer=null放在函数里面的时候。每一个，就是每一次onmouseover，调用函数StarMove时，都会新建一个var timer，然后再clearInterval(timer)就清除不了之前的定时器了。所以这时，每一次onmouseover时，都会叠加一个定时器。你就会看到方块的速度变快了。