计时器

Posted 2020-08-17 LiuWeiLong

定时器

var timer;

    timer = setInterval(function(){

        oNext.onclick();

    }, 2000);

oContainer.onmouseover = function(){

    clearInterval(timer);

};

oContainer.onmouseout = function(){

    var timer = setInterval(function(){

        oNext.onclick();

    }, 2000);

};

 

这是轮播图中定时器的一段代码,首先定义了一个定时器,鼠标划入的时候,清除定时器,鼠标划出的时候,执行定时器这段代码.这个时候我们刷新页面,第一次划入的时候,没有问题,鼠标划出;第二次划入的时候,也看不出来什么问题,但多划入划出几次后,我们就发现图片并不是按照定时器里所规定的2秒钟换成下一张图片,而是变得特别快,鼠标划入划出的次数越多,图片变换越快.

原因如下

首先,第一行代码中这个timer我没有把它放在一个函数中声明,所以timer是一个全局变量.在函数外声明的变量是全局变量,在函数里声明的变量叫局部变量,局部变量的特点是函数一执行完毕,局部变量被释放.而在鼠标划出的事件中,我又定义了一个timer,这个timer是局部变量,这时局部变量的优先级高于全局变量.鼠标划出一次,就执行一次onmouseout中的代码,就开了一个定时器赋给timer,再划出一次,又开了一个定时器赋给timer,当我频繁划入划出时,就相当于开了n多个定时器.当同时有多个定时器控制轮播图,轮播图就乱了.

有人说,当你第二次划出的时候,局部的timer不是已经被回收了么.这个时候timer被回收了但定时器还在开着,只要不clear当时的这个定时器它就永远开着.

还有人说上面这个onmouseover不是清除了timer么,onmouseover清除的是全局变量的timer,而不是局部变量的timer.

所以我们的解决办法是去掉onmouseout中timer前面的var,当我们去掉这个var的时候,划出函数中的timer就为之前定义的全局变量中的timer.

但现在的代码有些啰嗦,我们可以看到定时器在开始定义,划出的时候调用,所以我们可以将定时器封装在一个函数中,又因为页面一上来就要加载这个函数,所以我要先调用.当划出时,再调用.代码如下

var timer;
function run(){
    timer = setInterval(function(){
        oNext.onclick();
    }, 2000);
}
run();
oContainer.onmouseover = function(){
    clearInterval(timer);
};
oContainer.onmouseout = function(){
    run();
};