防抖与节流

74 阅读1分钟

防抖与节流

防抖和节流都是用来控制某个函数在一定时间内触发次数,两者都是为了减少触发频率,以便提高性能以及避免资源浪费

1. 防抖函数

防抖就是指触发事件后在 n 秒内函数只能执行一次,如果在 n 秒内又触发了事件,则会重新计算函数执行时间

image.png

防抖函数也是一个高阶函数,也使用了闭包,与节流不同,此处闭包保存的是setTimeout 返回的 timer,用于在后续持续触发之前及时取消定时器

2. 节流函数

节流就是指连续触发事件但是在 n 秒中只执行一次函数,节流会稀释函数的执行频率

使用时间戳实现的节流函数会在第一次触发事件时立即执行,以后每过 delay 秒之后才执行一次,并且最后一次触发事件不会被执行

定时器实现的节流函数在第一次触发时不会执行,而是在 delay 秒之后才执行,当最后一次停止触发后,还会再执行一次函数

image.png

3. 使用场景

  • 防抖 —— 表单元素的校验,如手机号,邮箱,用户名等,部分搜索功能的模糊查询结果实现
  • 节流 —— 鼠标的跟随动画实现,scrollresizetouchmovemousemove等极易持续性促发事件的相关动画问题,降低频率