我们在平时的前端开发中,会有很多场景会频繁触发事件。比如以下情况:
- window对象的resize、scroll事件
- 拖拽时的mousemove事件
- 文字输入、自动完成的keyup事件
但是我们有时候,为了避免在某一时间段内事件的频繁使用增加了服务器的压力,我们这个时候就要讲到函数防抖和节流了!
函数防抖
函数防抖是指对于当事件在某个时间段被触发后再执行的回调,如果这个时候又重新被触发,则重新开始计时,短时间内多次触发同一事件,只执行最后一次,或者只执行最开始的一次,中间的不执行。
1). 封装一个函数
2). 使用时直接调用(这里我们以鼠标拖拽为例)
这个时候当你鼠标在浏览器中移上去时,不管你怎么移动,只要1s内你鼠标移动了,控制台才会打印num,当过了1s后鼠标移动时再次打印num值。 因为mousemove 事件会耗费系统资源,在很大移动程度上,函数防抖解决了资源的大量消耗,很好的缓解事件频繁触发所带来的压力。
注意:
- 在实际的应用场景中,大多数情况都会使用事件的第一个参数来获取值,在闭包返回的匿名函数中拥有这个参数,但是函数是在定时器的匿名函数中执行的,所以并不具有这个参数。
- 如果不使用mouseMove函数直接绑定getNum为点击事件,在getNum中使用console.log(num)打印出来num的值。所以使用了防抖函数以后也要修正这个问题。
函数节流
预先设定一个执行周期,当调用动作的时刻大于等于执行周期则执行该动作,然后进入下一个新周期。
这里以页面滚动为例,普通的做法就是监听 window 对象的 scroll 事件,然后再函数体中写入判断是否滚动到底部的逻辑:
总的来说,函数防抖(debounce)和 函数节流(throttle)都是为了限制函数的执行频次,以优化函数触发频率过高导致的响应速度跟不上触发频率,出现延迟,假死或卡顿的现象。