简单举个例子聊聊对防抖与节流的理解

125 阅读2分钟

防抖和节流严格算起来应该属于性能优化方面,实际开发时使用的频率相当高,当一个事件在一段时间内无数次触发时就会严重占用内存影响性能,这时候就要做一个节流或者防抖去限制事件的触发.

1.防抖 (debounce)

防抖:在第一次执行事件之后,不会立即执行下一次事件,而是给出一个限制的事件,例如1000ms来限制下一次事件的执行,如果在1000ms之内没有再次触发此事件,则可以执行下一次事件;相反如果1000ms之内试图触发该事件,那么便不会执行事件,并且重新开始计时。 这里以一个简单的鼠标移动事件为例:

微信图片_20210809210934.png 在页面中先画两个宽高为300px的块元素,然后通过jquery来给下面的防抖的模块注册一个mousemove事件

微信图片_20210809211422.png

这里我们为了不影响全局的变量,可以借助闭包来实现,给time2一个初始化的值null,然后在执行第一次事件之后new Date()方法会给timer2赋予一个新的时间戳,下一次再触发这个mousemove时,if语句判断触发的时间与上一次触发时的时间两个时间戳相减之后是否大于1000ms,大于则执行事件,否则不执行并且重新开始计时,知道当你试图触发事件时,与上一次触发事件的时间戳相差小于1000ms才可以触发本次事件。

2.节流(throttle)

节流:在第一次触发事件时,也并不会立即执行下一次事件,必须要等到计时完成后才能执行下一次事件,也就是会在短期内失效,知道规定的时间计时完成才可以触发下一次事件,与防抖不同的是,即使你在计时没有完成时不断的试图触发事件,它也不会重新开始计时,触发一次事件,只计时一次。

微信图片_20210809213214.png

这里我们还是采用闭包来实现功能,可以看到,其实防抖与节流的方法的实现代码是差不多的,重点是在,当你设定了节流时,计时器时间戳的更新必须要在if的执行语句里,也就是当if执行时,才会开始计时,不像防抖,只要你试图触发事件,就要重新开始计时,这一点要着重去理解。

当然也有很多其他关于节流以及防抖的例子以及写法,这里我列出两种比较简单并且容易去理解的写法来帮助大家理解,希望能帮助到大家,共勉。