函数节流
节流: 固定时间内只触发第一次操作
举个🌰:
- 操作A触发, 直接执行A
- 来了操作B, 如果B和A的时间间隔大于等于节流间隔,从1开始
- 如果B和A的时间间隔小于节流间隔,设置操作B的定时器 此时timeout有值 直到B运行结束 timeout失效
- 来了操作C,如果timeout还在 return 如果timeout失效了 从1开始
简单的说就是 节流就是固定时间内只执行第一次的操作 已经设置好的定时器必须执行
1 | function throttle (action, delay) { |
函数防抖
防抖:每个固定时间间隔段内执行最后一次
> 1. 操作A来了, 设置定时器
> 2. 操作B来了, 取消上一个定时器 设置B的定时器
简单的说就是操作间距少于防抖间隔的时候 使用新的定时器代替旧的 达到只执行后一次操作的作用1
2
3
4
5
6
7
8
9
10
11function debounce(fn, delay) {
let timeout
return function (...args) {
const context = this
const cb = function() {
return fn.apply(context, args)
}
clearTimeout(timeout)
timeout = setTimeout(cb, delay)
}
}
小结
两者都是性能优化的选择,不同的是节流不会打破已设置好的定时器内容 防抖则会使用的新的定时器代替旧的