防抖與節流

防抖debounce與節流throttle都是控制事件處理函式執行頻率的方法，當函式會進行dom操作或者具有請求伺服器等行為並且作為高頻事件例如onscroll觸發的事件處理函式時，就需要進行事件處理函式執行頻率的控制，否則會造成大量的資源浪費致使效能下降，當然無論是防抖與節流實質上並沒有減少事件觸發次數，而是通過減少事件處理函式的執行次數從而提高效能。

當持續觸發事件的時候，事件處理函式是完全不執行的，等最後一次觸發結束的一段時間之後，再去執行。最常見的例子就是搜尋建議功能，當使用者進行持續輸入時，並不會請求伺服器進行搜尋建議的計算，直至使用者輸入完成後的n毫秒後才會將資料傳輸至後端並返回搜尋建議。

實現思路：每次觸發事件時都取消之前的延時呼叫方法並重設定時器。

function debounce(wait, funct, ...args)

}window.onscroll = debounce(300, (a) => console.log(a), 1);

實現思路：判斷是否存在定時器，沒有則執行事件處理函式，然後無論是否已經存在定時器都需要重設定時器。

function debounce(wait, funct, ...args)

}window.onscroll = debounce(300, (a) => console.log(a), 1);

實現思路：通過時間戳記錄上次事件處理函式執行時間，事件觸發時若時間差大於執行週期則執行事件處理函式並賦值執行時間為當前時間戳。

function throttle(wait, funct, ...args)

}}window.onscroll = throttle(1000, (a) => console.log(a), 1);

function throttle(wait, funct, ...args)  

}}window.onscroll = throttle(1000, (a) => console.log(a), 1);

節流與防抖

瀏覽器中某些計算和處理要比其他的昂貴，例如在瀏覽器中操作dom比非dom互動需要更多的記憶體和cpu的事件，連續嘗試進行過多的dom相關操作可能ui導致瀏覽器掛起，有時甚至會崩潰。尤其在ie中使用onresize事件處理程式的時候容易發生，當調整瀏覽器大小的時候，該事件會連續觸發。在onresize...

防抖與節流

防抖 當事件持續觸發，一定時間內沒有觸發事件函式處理一次。比如輸入框的ajax請求做模糊查詢 節流 當時間持續觸發，在一秒內只能觸發一次。比如滾動條持續向下滾動，載入更多資料 function debounce fn,wait function throttle func,delay functio...

節流與防抖

在實際開發中，我們經常會遇到一類需求 根據input輸入容來校驗或者搜尋資料，根據視窗的大小變化來進行相關操作等。如果事件操作函式跟使用者的操作保持實時同步，那麼當使用者的操作十分頻繁時，就會多出許多無用的事件操作，並加重瀏覽器的負擔，影響頁面的效能。這時我們可以採用debounce 防抖 和thr...