JavaScript防抖與節流詳解
防抖debounce
定義:對於短時間內連續觸發的事件,比如滾動事件,防抖就是讓某個時間期限內,事件處理函數隻執行一次。
關於防抖,拿手指按壓彈簧舉例,用手指按壓彈簧,一直按住,彈簧將不會彈起直到松開手指。
舉例resize:
function debounce(fn, wait){ var timer = null; return ()=>{ if(timer !== null){ clearTimeout(timer); } timer = setTimeout(fn, wait); } } function handle(){ console.log(Math.random()); } window.addEventListener("resize",debounce(handle, 1000));
上面是非立即執行版
立即執行版
function debounce(fn, wait){ let timeid, flag = true; return () => { clearTimeout(timeid); if(flag){ fn(); flag = false; }else{ timeid = setTimeout(()=>{ flag = true; }, wait); } } }
拖動瀏覽器窗口,觸發resize,此時並不觸發handle函數,定時器計時,在計時時間內再次觸發resize的話,則會從新計時,這樣做的好處就是拖動瀏覽器窗口觸發resize,並不會頻繁執行handle函數,隻讓其在需要執行的時候去運行,有效的去除瞭冗餘。
常見寫法:
const debounce = (func, delay = 200) => { let timeout = null return function () { clearTimeout(timeout) timeout = setTimeout(() => { func.apply(this, arguments) }, delay) } }
節流throttle
定義:讓事件在一定時間內隻執行一次。
本意是像水龍頭的水滴一樣,規定時間內隻執行一次,減少頻繁反復執行。
如搜索框input事件。
通過時間戳計算:
function throttle(fn,wait){ let startTime = 0; return function(){ let endTime = Date.now(); if(endTime-startTime>wait){ fn(); startTime = endTime; } } }
通過定時器:
function throttle(fn,wait){ let timeid = null; return function(){ if(!timeid){ timeid = setTimeout(function(){ fn(); timeid = null; },wait) } } }
總結
本篇文章就到這裡瞭,希望能夠給你帶來幫助,也希望您能夠多多關註WalkonNet的更多內容!