防抖与节流
- 防抖：事件停止触发一段时间后执行回调。
- 节流：事件触发过程中不断执行回调，但是稀释回调的频率。
防抖有点像电梯关门，假设电梯检测5秒内没有人进入就会关门，如果在第3秒小明进了电梯，则需要在第3秒时重新计时5秒内没有人进入才会关门。
节流有点像游戏里的攻击，你可以快速连续的点击攻击键，但是攻击动作只会按照固有的攻击速度执行。
防抖
应用场景：
- 窗口resize重新渲染渲染echarts（resize的过程属于中间状态，渲染状态不需要关心，所以应该用防抖）
- 连续重复提交表单（这个用防抖的话也行，那就是最后一次点击会发送请求，不过用一个布尔值的变量锁配合loading来处理更合适）
function debounce<T extends (args: unknown[]) => void>(fn: T, wait: number) {
let timeout: number
return function () {
const context = this
const args = arguments
clearTimeout(timeout)
timeout = setTimeout(function () {
fn.apply(context, args)
}, wait)
}
}
节流
应用场景：
- 页面滚动时，埋点发送请求（因为需要稀释发送请求的频率，所以适合用节流，用防抖的话就变成滚动停止才发送一次请求了）
- 搜索框搜索联想功能（这个看具体的业务需求，我在谷歌试了下基本每个字母都会触发一次请求，但如果要用的话肯定是节流比防抖合适，因为用防抖就变成了停止输入才会发送请求了）
function throttle<T extends (args: unknown[]) => void>(fn: T, wait) {
let previous = 0
return function () {
let now = +new Date()
const context = this
const args = arguments
if (now - previous > wait) {
fn.apply(context, args)
previous = now
}
}
}