防抖與節流函數
阿新 • • 發佈:2019-04-11
需要 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; }
考慮到我們的搜索,只需要觸發一次。故選擇了防抖函數
不過這兩種方案到是對函數閉包的一種很好的應用場景,(意外收獲)
防抖與節流函數