使用计时器实现防抖与节流效果

首先先介绍一下防抖与节流的概念

防抖：一个事件短时间连续触发，只生效一次，（例如在制作打地鼠中的点击事件，一个地鼠不管连续点击多少次只能触发一次打击效果）

防抖

1.先使用计时器设置一个延时加载效果，点击后把i的值赋值给div，此时有一个问题就是连续点击的话会一直加，而我们需要的效果是在连续点击的情况下只生效一次

 2.现在只需要在点击事件的第一行添加个clearTimeout()清除计时器就好了

 3.其中的原理就是，在点击按钮时会先清除一次计时器，而后在声明一个计时器赋值，连续点击时上一次触发的计时器会在没有生效之前（因为设置了1s的延迟）被清除，只有最后一次点击生效

节流：一个事件在一定时间内只触发一次

1.节流实现效果只需要在防抖的基础上改进一下便可，首先我们需要一个bool值变量进行判断，当bo值为true时则声明计时器

 

 2.在进入if语句时立即把bo的值设置为false防止连续触发，在计时器中再把bo的值给设置回true再触发事件

 3.原理：bo的值初始为true，在点击事件触发后进入if语句中，把bo的值设置为false，bo值被设置为false时，再点击触发a事件是不会进入if语句的，而后在计时器中把bo的值设置为true，这里设置了2s延迟，bo的值在两秒之后才会被赋值为true，这里就实现了两秒内不管怎么点都只会触发第一次的效果。

如有不足的地方欢迎留言补充