深入理解throttled

一、作用及原理

Throttled是一種限制頻率的函數，可以用來減少不必要的性能開銷，保護應用程序免受過載的影響。該函數將輸入動作轉換為固定的時間間隔，並在此時間間隔內忽略所有附加輸入。例如，如果一個用戶頻繁地調整窗口大小並引起了視圖更新，那麼throttled函數將確保每個更新周期之間有一定的時間間隔。

實現的原理是使用setTimeout來執行要調用的函數，並設置一個固定的延遲時間。當throttled函數被調用時，它會檢查當前是否已經設置了一個timeout，如果有，則不執行操作。如果沒有，則設置一個timeout使函數在延遲時間之後被調用，並返回函數的結果。下一次調用將檢查是否有一個timeout，直到所有的調用都已經在一定的時間間隔後進行。

二、使用方法

throttled函數通常用於優化用戶交互，如滾動、窗口改變大小等操作，以避免過多次觸發操作產生的重複和多餘的計算。

一個示例是限制用於搜索框的自動補全功能，以避免每次用戶輸入字元時都調用API。使用throttled函數，可以將搜索操作限制在固定的時間間隔內，並僅在此時間過去後才調用API。

function search(keyword) {
  // 調用API的操作
}

const throttledSearch = throttled(search, 1000); // 設置延遲為1秒鐘

input.addEventListener('input', (e) => {
  throttledSearch(e.target.value); // 只有當用戶停止輸入1秒鐘後才會調用
});

在上面的例子中，每當用戶在搜索框中輸入文字時，都會調用throttledSearch函數。該函數僅在用戶停止輸入1秒鐘後才會實際調用search函數，以限制API的調用頻率。

三、使用場景

throttled函數通常用於以下場景：

1. 監聽窗口大小改變

當用戶調整窗口大小時，整個頁面都會被重新渲染。為了避免每次窗口大小發生變化都重新渲染頁面，可以使用throttled函數來限制渲染的頻率。

window.addEventListener('resize', throttled(() => {
  // 重新渲染頁面
}, 500));

2. 防止重複提交表單

當用戶快速提交表單時，可能會產生重複提交的問題。使用throttled函數可以避免此問題，限制表單提交的頻率。

form.addEventListener('submit', throttled((e) => {
  e.preventDefault();
  // 提交表單的操作
}, 1000));

3. 滾動事件的監聽

滾動事件通常會觸發頻繁的回調，因此使用throttled函數可以優化滾動事件的處理。

window.addEventListener('scroll', throttled(() => {
  // 處理滾動事件
}, 500));

四、總結

通過使用throttled函數，可以優化許多用戶交互場景，同時減少不必要的性能開銷。該函數的實現原理簡單，但應該注意將延遲時間設置得合理，以便在不降低用戶體驗的情況下優化性能。