防抖与节流
防抖和节流都是用来控制某个函数在一定时间内触发次数,两者都是为了减少触发频率,以便提高性能以及避免资源浪费
1. 防抖函数
防抖就是指触发事件后在 n 秒内函数只能执行一次,如果在 n 秒内又触发了事件,则会重新计算函数执行时间
防抖函数也是一个高阶函数,也使用了闭包,与节流不同,此处闭包保存的是setTimeout 返回的 timer,用于在后续持续触发之前及时取消定时器
2. 节流函数
节流就是指连续触发事件但是在 n 秒中只执行一次函数,节流会稀释函数的执行频率
使用时间戳实现的节流函数会在第一次触发事件时立即执行,以后每过 delay 秒之后才执行一次,并且最后一次触发事件不会被执行
定时器实现的节流函数在第一次触发时不会执行,而是在 delay 秒之后才执行,当最后一次停止触发后,还会再执行一次函数
3. 使用场景
- 防抖 —— 表单元素的校验,如手机号,邮箱,用户名等,部分搜索功能的模糊查询结果实现
- 节流 —— 鼠标的跟随动画实现,
scroll,resize,touchmove,mousemove等极易持续性促发事件的相关动画问题,降低频率