吟唱类技能会被中途打断 == 防抖（debounce）
防止抖动，以免把一次事件误认为多次
场景:
- 登录、发短信等按钮避免用户点击太快，以致于发送了多次请求，需要防抖
- 调整浏览器窗口大小时，resize 次数过于频繁，造成计算过多，此时需要一次到位，就用到了防抖
- 文本编辑器实时保存，当无任何更改操作一秒后进行保存
实现关键点：重置 setTimeout
1
2
3
4
5
6
7
8
9
10
11
|
function debounce(fn, delay = 500) {
let timer
return function () {
timer && clearTimeout(timer)
const args = arguments
timer = setTimeout(() => {
fn.apply(this, args)
}, delay)
}
}
|
大招技能有冷却 == 节流（throttle）
控制事件发生的频率，如控制为 1s 发生一次，甚至 1 分钟发生一次。
场景：
- scroll 事件，每隔一秒计算一次位置信息等
- 浏览器播放事件，每个一秒计算一次进度信息等
- input 框实时搜索并发送请求展示下拉列表，没隔一秒发送一次请求 (也可做防抖)
实现关键点：lock 状态锁
1
2
3
4
5
6
7
8
9
10
11
12
|
function throttle(fn, delay = 500) {
let lock = false
return function () {
if (lock) return
lock = true
const args = arguments
let timer = setTimeout(() => {
fn.apply(this, args)
lock = false
}, delay)
}
}
|
