定时器的用法？

小课堂【郑州第七十八期】

1.背景介绍

在我们的实际应用中经常会出现循环执行某一操作的需求，这时我们通常会考虑使用for循环，但是这种循环的特征是我们无法看到循环过程，最终只能看到循环结束后的值。那么如果我们要看到一个完整的过程就需要用到我们今天所要讲的定时器了。

2.知识剖析

我们在任务中一般会遇见过这样的两种定时器，第一种是延时(倒计时)定时器setTimeOut,第二种是循环(间隔)定时器setInterval

1,setInterval(code,millisec)

setInterval()按照指定的周期（以毫秒计）来调用函数或计算表达式。方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。
该定时器主要有2个参数，code处是要执行或调用的函数，第二个参数是调用函数间隔的时间，以毫秒为单位。

2.setTimeout(code,millisec)

该定时器同setInterval（）一样，都有2个参数，code处是要执行或调用的函数，第二个参数是在执行代码前需等待的毫秒数。此定时器也称为倒计定时器，只执行1次

3.clearInterval()

setInterval()会不停地调用函数，clearInterval()用于清除定时器，结束调用。
clearInterval(setInterval()),这种写法一般比较少见，一般使用定时器返回的id值来清除定时器。 var timer=setInterval(code,millisec) clearInterval(timer)

3.常见问题

                        var i=0;

                        function a(){ 

                         i++;

                         if(i==20){ 

                          return; 

                         }

                         t=setTimeout(a,17);

                        }

                        a();

                        alert(i);                                     

这段代码最终会输出多少？

为了证明定时器没有偷懒               

var i=0;                    

function a(){                       

 i++;                        

if(i==20){                        

return;                

}                

t=setTimeout(a,17);            

}                

function b(){                

alert(i);                

f=setTimeout(b,17);                

}                    

a();                    

b();            

4.解决方案

               var i=0;

                 function a(){

                    i++;

                    if(i==20){

                    alert(i);

                    return;

                    }

                    t=setTimeout(a,1);

                }

                    a();                

5.编码实战

6.扩展思考

调用定时器时，多次重复点击时后循环会越来越快？

1.在函数内部，我们可以先清除定时器，再设置定时器。这样的话，每次点击事件发生时，都把前一个定时器清除，再重现开启一个新的定时器

2.使用disabled禁用属性

7.参考文献

参考一：小扣钉博客

参考二：慕课网JS进阶篇

8.更多讨论

还有哪些方法来解决定时器触发变快的办法呢？

变量var timer是写在onclick内部的 每次点击都会var一次,相当于重新赋值。在函数内部声明var 就相当于局部变量 重新赋值之后 这个局部变量就会被销毁 再次点击的时候timer已经不存在了