麻烦大神解释下以下代码中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时，都会叠加一个定时器。你就会看到方块的速度变快了。