防抖（debounce）：一段时间内重复执行的话，只执行最后一次，清除之前的异步任务，重点在清零
应用场景：
- 搜索框搜索输入。只需用户最后一次输入完，再发送请求
- 手机号、邮箱验证输入检测
- 窗口大小resize。只需窗口调整完成后，计算窗口大小。防止重复渲染。
- 页面滚动处理事件
function debounce(fn,delay){
let timerId = null
return function(){
let context = this
if(timerId){
clearTimeout(timerId)
}
timerId = setTimeout(()=>{
fn.apply(context,arguments)
},delay || 500)
}
}
function clickHandler() {
console.log('防抖click')
}
const handler = debounce(clickHandler)
document.getElementById('button').addEventListener('click',handler)
节流(throttle)：只在开始执行一次，未执行完成的过程中如果再次触发(类似于游戏cd)，则忽略，核心在于开关锁
应用场景：
- 点击按钮提交表单，第一次有效
function throttle(fn,delay){
let canUse = true
return function(){
if(canUse){
fn.apply(this,arguments)
canUse = false
setTimeout(()=>{canUse = true},delay || 3000)
}
}
}
function clickHandler() {
console.log('节流click')
}
const handler = throttle(clickHandler)
document.getElementById('button').addEventListener('click',handler)
