1. 程式人生 > >防抖與節流函數

防抖與節流函數

需要 spa 選擇 timeout 定時 場景 lse div col

場景:在開發搜索框的過程中,為了防止高頻觸發,減少不必要的性能浪費。我們需要用一種機制來阻止高頻觸發

兩種實現方案:

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; }

考慮到我們的搜索,只需要觸發一次。故選擇了防抖函數

不過這兩種方案到是對函數閉包的一種很好的應用場景,(意外收獲)

防抖與節流函數