setInterval定时器使用(个人理解)

setInterval()定时器的启动原则(通过实验得出的结论)
1:赋值定时器给timer变量时,应该是先执行定时器内的语句再赋值,假设是先赋值timer为定时器1(0s时触发的定时器),那么在执行clearInterval(timer)时,先赋值timer为定时器1(0s时触发的定时器),直接清空定时器1,clearInterval下面的语句则不执行。
2、每次将定时器赋值给timer不会清空上一次定时器,上一次定时器仍然在启动,实验如下:
代码:

执行结果:
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
从执行结果来看,onresize执行了两次(即窗口大小改变了两次),设置了两个定时器。
过60000ms(即1min),应该执行了两个定时器,输出了两次innerWidth即946应该是输出了2次;
假设(验证设想):
1、设想1:clearInterval(timer)是为了清除最后一次的定时器,其它定时器在给timer赋值定时器被清除掉。每赋值一个定时器n(假设是第n个定时器)给timer(如果有定时器已经赋值给了timer),会自动将上一次赋值给timer的定时器(n-1)给清除掉,不需要使用clearInterval(timer)清除。写clearInterval(timer)实际只将最后一次清除了。
2、设想2:clearInterval(timer)是为了清除每次的上一个定时器。每赋值一个定时器(假设是第n个定时器)给timer不会自动清除上一个定时器(假设是n-2个定时器)。
验证结果:
先设置定时器每1min执行一次,然后执行onresize,从第一张图中的两个null可以看出一共执行了两次onresize(也就是执行了两次onresize操作及里面的代码),也就是说在不同时刻触发了两个定时器,并且两个定时器都是在1min后执行。从第二张图(过1min后)可以看出,执行了两个定时器。从第三图可以看见,过2min后一共执行了4次定时器,也就是说,在1min过后又过1min又执行了两次定时器。也就说明,将第二个定时器赋值给timer并没有覆盖掉上一个定时器。
所以,得出结论:将定时器赋值给变量(此时变量已经赋值了定时器),不会清除变量中之前赋值的定时器。
代码:

执行onresize,timer=null和timer=setInterval()两个语句并不是同时执行,而是先执行完timer=null,然后再根据定时器设置的间隔来执行定时器。

代码:

假设窗口改变事件从0s到0.5s时刻(假设onresize一共执行了6次,分别在0s、0.1s、0.2s、0.3s、0.4、0.5s时刻),定时器设置每过1000ms即1s执行一次,在0.5s时,窗口大小为1000px

        console.log(innerWidth)                 demo.innerHTML                      console.log(timer)                        timer发生的事件发生的事件
0s时    由于没有执行定时器,不执行该语句        由于没有执行定时器,不执行该语句      先赋值null,此时定时器没有赋值给timer,      执行第一次onrisize,赋值timer为null,并在1s后启动定时器
                                                                                    执行输出timer时为null
0.1s时  由于没有执行定时器,不执行该语句        由于没有执行定时器,不执行该语句      先赋值null(覆盖上一次),此时定时器没       执行第二次onrisize,赋值timer为null(覆盖),并在1s后(1s时)启动定时器
                                                                                  有赋值给timer,执行输出timer时为null
0.2s时  由于没有执行定时器,不执行该语句        由于没有执行定时器,不执行该语句      先赋值null(覆盖上一次),此时定时器没       执行第三次onrisize,赋值timer为null(覆盖),并在1s后(1.1s时)启动定时器
                                                                                    有赋值给timer,执行输出timer时为null
0.3s时  由于没有执行定时器,不执行该语句        由于没有执行定时器,不执行该语句      先赋值null(覆盖上一次),此时定时器没       执行第四次onrisize,赋值timer为null(覆盖),并在1s后(1.2s时)启动定时器
                                                                                    有赋值给timer,执行输出timer时为null
0.4s时  由于没有执行定时器,不执行该语句        由于没有执行定时器,不执行该语句      先赋值null(覆盖上一次),此时定时器没       执行第五次onrisize,赋值timer为null(覆盖),并在1s后(1.3s时)启动定时器
                                                                                    有赋值给timer,执行输出timer时为null
0.5s时  由于没有执行定时器,不执行该语句        由于没有执行定时器,不执行该语句      先赋值null(覆盖上一次),此时定时器没       执行第六次onrisize,赋值timer为null(覆盖),并在1s后(1.4s时)启动定时器
                                                                                    有赋值给timer,执行输出timer时为null
/*0.5s后执行的语句*/
0.5s后onresize没有执行,则不执行var tiemr=null语句和console.log(timer)语句   只执行在0~0.5s时刻所触发的onresize时,启动的定时器(里面的语句)。

1s时:  执行第一次定时器,重新赋值timer为0s时触发的定时器并执行定时器里的语句,执行clearInterval(timer)语句,此时timer为空,                 赋值timer为0s时触发的定时器,执行定时器中的代码
        然后获得此时浏览器窗口宽度,并输出在控制台和demo盒子中(均为1000)

1.1s时   执行第二次定时器,重新赋值timer为0.1时触发的定时器并执行定时器里的语句,执行clearInterval(timer)语句,清除timer为1s时执行的定时器,  赋值timer为0.1s时触发的定时器,执行定时器中的代码
        然后获得此时浏览器的宽度,并输出在控制台和demo盒子中(均为1000)


*/

相关推荐
©️2020 CSDN 皮肤主题: 游动-白 设计师:白松林 返回首页