防抖与节流函数

场景:在开发搜索框的过程中,为了防止高频触发,减少不必要的性能浪费。我们需要用一种机制来阻止高频触发

两种实现方案:

1.防抖函数:在一定时间内多次执行以最后一次执行为准

    const debounce = (fn,duration)=>{
        let timer=null;
        let result=()=>{
            clearTimeout(timer);
            timer=setTimeout(fn,duration);
        }
        return result;
    }

2.节流函数:在一定时间段内只执行一次

const throttle=(fn,duration)=>{
        let timer=null;
        let result=()=>{
            if(timer){
                return false;
            }
            else{
                timer=setTimeout(()=>{
                    timer=null;
                    fn();
                },duration);
            }
        }
        return result;
    }

考虑到我们的搜索,只需要触发一次。故选择了防抖函数

不过这两种方案到是对函数闭包的一种很好的应用场景,(意外收获)

原文地址:https://www.cnblogs.com/maoBable/p/10691341.html