函数防抖和函数节流

概念

函数防抖和函数节流的目的都是降低回调执行频率，节约资源，控制函数的执行的次数

函数防抖: 主要应用在事件被频繁的触发情况下，在事件被触发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，不会执行。且多次触发不需要重新计时