概念
- 节流:n秒内只触发一次
- 防抖:n秒后触发,如果n秒内多次触发会重新计时
代码
节流
会立即触发并在限定时间内不会再次触发
function throttled(fn,delay=1000){
let oldTime = 0;
return function (...args){
let curTime = Date.now();
if(curTime - oldTime >= delay){
fn.apply(null,args)
old = Date.now();
}
}
}
防抖
function debounce(fn,wait = 1000){
let timeout;
return function(...args){
clearTimeout(timeout);
timeout = setTimeout(()=>{
fn.apply(null,args);
},wait)
}
}
应用场景
防抖用在连续的事件,只触发一次时
- 搜索框搜索输入。只需用户最后一次输入完,再发送请求
- 手机号、邮箱验证输入检测
- 窗口大小resize。只需窗口调整完成后,计算窗口大小。防止重复渲染。
节流在间隔一段时间执行一次回调的场景有:
- 滚动加载,加载更多或滚到底部监听
- 搜索框,搜索联想功能