防抖:
概念:防抖是指在事件触发后,在n秒内只执行一次,如果事件触发后在n秒内又被触发,则会重新计算触发事件。
要点:防抖采用setTimeOut作为辅助函数和闭包函数,如果多次触发事件,则用cleanTimeOut清除上一次记录的事件。
<input id='keyword'>
document.querySelector('#keyword').addEventListener('input',bounce(requestWork,2000))
function bounce(fn,delay){
let times = null;
return ()=>{
if(times){
clearTimeout(times)
}
times = setTimeOut(fn,delay)
}
function requestWork(){
log('请求服务器')
}
防抖函数参数说明:
1. fn为需要执行的业务函数,delay是多少秒后需要执行业务函数的时间。
节流:
概念:限制一个函数只能在一定时间内执行一次
document.querySelector('#keyword').addEventListener('input', throttle(requestWork, 2000))
// 实现放流
function throttle(fn,dely){
let times = null
return ()=>{
if(!times){
times = setTimeout(()=>{
fn()
times = null
},dely)
}
}
}
function requestWork() {
console.log('发送请求');
}
节流的应用场景
- 懒加载、滚动加载、加载更多或监听滚动条位置;
- 百度搜索框、搜索联想功能;
- 防止高频点击提交,防止表单重复提交;
防抖与节流的区别:
防抖是在业务函数在一定时间内触发,只有最后一次才被触发,这段时间内函数多次触发则会清除上一次业务函数的事件,重新计算事件
节流是在一段时间内,业务函数只被触发一次。