概念
函数防抖和函数节流的目的都是降低回调执行频率,节约资源,控制函数的执行的次数
函数防抖: 主要应用在事件被频繁的触发情况下,在事件被触发n秒后再执行函数,若n秒内事件被再次触发,则需要重新等待n秒后再执行函数。
函数节流: 主要指在规定的时间内,函数只执行一次。
实现原理
函数防抖
函数防抖实现代码
function debounce(fn, time){
let timer = null;
return function(){
if(timer){
clearTimeout(timer)
}
timer = setTimeout(()=>{
fn.apply(this)
}, time)
}
}
函数防抖主要用于搜索框的实时搜索,以下是搜索框实时搜索函数防抖的简单应用
<!-- html -->
<input id="input" type="text" name="" placeholder="函数防抖" onInput="inputDebounce()">
<!-- js -->
<script>
var inputDebounce = debounce(onInput, 500);
function onInput() {
// do something
}
</script>
函数防抖通过闭包和延时器实现,debounce函数包含两个参数,fn表示回调执行的函数,time表示延迟的时间,debounce函数定义一个timer变量用来存储延时器,如果函数在time时间内多次触发,则清除延迟器,重新计时。
函数节流
函数节流主要用于滚动事件
function throttle(fn,time){
let isReady = true;
return function(){
if(!isReady){
return
}
isReady = false;
setTimeout(() => {
fn.apply(this);
isReady = true;
}, time)
}
}
函数节流的实现方式与函数防抖类似都是通过闭包和延时器实现,不同的点是函数在规定的time时间内只执行一次,如果两次事件触发时间没有超过time,函数会被return,不会执行。且多次触发不需要重新计时