防抖函数
- 原理： 在事件被触发n秒后在执行回调，如果在这n秒内又被触发，则重新计时
const debounce = (fn,delay) => {
let timer = null;
return (...arg) => {
clearTimeout(timer);
timer = setTimeout(()=>{
fn.apply(this,args);
},delay)
}
}
适用场景
- 按钮提交场景：防止多次提交按钮，只执行最后一次提交
- 服务端验证场景：表单验证需要服务端配合，只执行一段连续的输入事件的最后一次，还有搜索联想词功能类似生存环境请用lodash.debounce
节流函数
- 规定一段时间内，只能触发一次函数，如果这个单位时间内多次触发，只有一次生效
const throttle = (fn,delay=500)=>{
let flag = true;
return (...args) => {
if(!flag) return
flag = false;
setTimeout(()=>{
fn.apply(this,args)
flag = true
},delay)
}
}
适用场景
- 拖拽场景：固定时间内只执行一次，防止高频词触发位置变动
- 缩放场景，监控浏览器resize
- 动画场景，避免短时间内多次触发动画引起性能问题
