一、防抖(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
像是搜索框的查询,等待用户完成操作再执行,避免打字期间就不断的查询。
参考: