前言

小水一波，函數的防抖與節流。

文章目錄

• • 前言
  • 介紹
  • 實現方式
  • • 防抖
    • 節流

介紹

防抖與節流的優化邏輯，在我們的日常開發中，有著一定的地位。

防抖和節流是兩種常用的性能優化技術，用于限制某個函數在一定時間內被觸發的次數,減少不必要的計算或操作，提高頁面性能。

實現方式

在我們日常的工作開發中，我們更多的使用lodash庫中的防抖與節流函數，但更多的分享，是了解代碼的原理，為了方便不能使用第三方庫的時候也能夠自己手寫去解決對應的需求問題。

防抖

• 代碼原理：
  防抖的原理是確保一個函數在最后一次事件發生后延遲執行。如果在指定的延遲時間內再次觸發事件，則重新計時。
• 代碼實現：

function debounce(func, wait) {let timeout;return function(...args) {const context = this;clearTimeout(timeout);timeout = setTimeout(() => {func.apply(context, args);}, wait);};
}

節流

• 代碼原理：
  節流的原理是確保一個函數在指定的時間間隔內最多只執行一次。無論事件觸發的頻率如何，函數只在時間間隔的開始或結束時執行一次。
• 代碼實現：

function throttle(func, limit) {let inThrottle;return function(...args) {const context = this;if (!inThrottle) {func.apply(context, args);inThrottle = true;setTimeout(() => {inThrottle = false;}, limit);}};
}