一、防抖（debounce）
含义：当调用动作过n豪秒后，才会执行该动作，若在这n毫秒内，又调用此动作，则将重新计算执行时间
const debounce = (fn,waitTime)=>{
let timer=null;
return function(){
clearTimeout(timeout)
timeout=setTimeout(()=>{
//如果fn 没有返回一个函数，则 fn.apply 报错
fn.apply(this,arguments) //arguments为fn 函数所需参数，apply()接收参数为Array类型
},waitTime)
}
}
使用：
function add(a,b){
return function(){
//返回一个函数
console.log(a+b)
}
}
window.onresize=debounce(add(2,3),500)
//或者直接
// window.onresize=debounce(function(){
// console.log('1111')
// },500)
错误写法：
function log(){
console.log('1')//错误写法，没有返回匿名函数，报错 Cannot read property 'apply' of undefined
}
window.onresize=debounce(log(),500)//只输出一次
使用场景：
- 输入框打字搜索查询时，节约请求资源
- window对象的resize事件
- 拖拽时的mousemove事件
二、节流（throttle）
含义：预先设定一个执行周期，当调用动作的时刻大于等于n则执行该动作，n豪秒内只会执行一次，然后进入下一个新周期
const throttle = (fn,time)=>{
let flag=true;
return function(){
if(!flag) return;
flag=false;
setTimeout(()=>{
fn.apply(this,arguments)
flag=true
},time)
}
}
使用：
window.onscroll = throttle(function(){
console.log('正在加载中~')
},3000)
使用场景：
- 节流常应用于鼠标不断点击触发、监听滚动事件。
防抖与节流的区别
1. 共同点：
函数节流（throttle）与 函数防抖（debounce）都是为了限制函数的执行频次，以优化函数触发频率过高导致的响应速度跟不上触发频率，出现延迟，假死或卡顿的现象。
2. 区别：
throttle 像是按钮的冷却时间，防止用户疯狂点击按钮提交表单不断的调用接口，我们限制 2 秒才发一次请求，不管你点击多少次；
debounce 像是搜索框的查询，等待用户完成操作再执行，避免打字期间就不断的查询。
参考：