提升 JavaScript 效能：了解去抖動和節流-js教程-PHP中文網

Enhancing Performance in JavaScript: Understanding Debouncing and Throttling

去抖：策略上的拖延
- 去抖動的工作原理
- 去抖動範例
節流：控制事件頻率
- 節流的工作原理
- 節流範例
在 React 中實作：使用自訂 Hook 進行反跳和限制
- 用於去抖動的自訂鉤子
- 使用去抖鉤
- 用於節流的自訂掛鉤
- 使用油門鉤
最後的想法

效能最佳化在現代 Web 應用程式中至關重要，尤其是那些涉及用戶互動的應用程序，例如在搜尋欄中鍵入、滾動或調整視窗大小。這些操作可能會在短時間內觸發許多函數調用，從而降低效能。

為了緩解這個問題，兩種常見的技術是去抖動和節流，它們允許您控制函數呼叫的速率，從而獲得更流暢、更有效率的體驗。

去抖：策略上的拖延

去抖動 延遲函數的執行，直到上次事件觸發後經過指定時間。在處理搜尋輸入等事件時，它特別有用，您希望避免在每次按鍵時發出 API 請求。

去抖動如何運作

想像一個搜尋輸入，您希望等到使用者停止輸入 300 毫秒後再發出 API 請求。去抖功能可以確保函數僅在使用者暫停輸入後執行，從而防止不必要的 API 呼叫。

去抖範例


function debounce(func, delay) {
  let timeout;
  return function () {
    const context = this;
    const args = arguments;
    clearTimeout(timeout);
    timeout = setTimeout(() => func.apply(context, args), delay);
  };
}
function searchAPI() {
  console.log("API request made");
}
const debouncedSearch = debounce(searchAPI, 300);
debouncedSearch(); // Only triggers 300ms after the last call

登入後複製

這裡，只有使用者暫停 300 毫秒才會發出 API 請求。

節流：控制事件頻率

與去抖動相比，節流確保每個指定的時間間隔最多呼叫一次函數，即使事件繼續觸發也是如此。此技術非常適合視窗大小調整或捲動等事件連續觸發的場景。

節流如何運作

限制允許函數在定義的時間段（例如 200 毫秒）內僅執行一次，確保函數不會被重複觸發淹沒。

節流範例


function throttle(func, limit) {
  let lastFunc;
  let lastRan;
  return function () {
    const context = this;
    const args = arguments;
    if (!lastRan) {
      func.apply(context, args);
      lastRan = Date.now();
    } else {
      clearTimeout(lastFunc);
      lastFunc = setTimeout(() => {
        if (Date.now() - lastRan >= limit) {
          func.apply(context, args);
          lastRan = Date.now();
        }
      }, limit - (Date.now() - lastRan));
    }
  };
}
function updateLayout() {
  console.log("Layout updated");
}
const throttledUpdate = throttle(updateLayout, 200);
window.addEventListener("resize", throttledUpdate);

登入後複製

在此範例中，在視窗調整大小期間，佈局更新函數只會每 200 毫秒呼叫一次。

在 React 中實作：使用自訂 Hook 進行反跳和限制

在 React 中，我們可以使用自訂鉤子來使防手震和節流功能可跨元件重複使用。這增強了模組化並優化了各種互動中的效能。

用於去抖的自訂鉤子


<p>import { useRef, useCallback } from "react";<br>
const useDebounce = (func, delay) => {<br>
  const timer = useRef(null);<br>
  return useCallback(<br>
    (...args) => {<br>
      if (timer.current) {<br>
        clearTimeout(timer.current);<br>
      }<br>
      timer.current = setTimeout(() => func(...args), delay);<br>
    },<br>
    [func, delay]<br>
  );<br>
};<br>
export default useDebounce;</p>

登入後複製

使用去抖鉤


<p>import React, { useState } from "react";<br>
import useDebounce from "./useDebounce";<br>
const SearchComponent = () => {<br>
  const [searchTerm, setSearchTerm] = useState("");</p>

<p>const fetchResults = (query) => {<br>
    console.log(Fetching results for </span><span class="p">${</span><span class="nx">query</span><span class="p">}</span><span class="s2">);<br>
    return new Promise((resolve) => setTimeout(resolve, 1000));<br>
  };<br>
  const debouncedFetch = useDebounce(fetchResults, 300);<br>
  const handleSearch = (e) => {<br>
    setSearchTerm(e.target.value);<br>
    debouncedFetch(e.target.value);<br>
  };<br>
  return <input value={searchTerm} onChange={handleSearch} placeholder="Search..." />;<br>
};<br>
export default SearchComponent;</p>

登入後複製

用於節流的自訂鉤子


<p>import { useRef, useCallback } from "react";<br>
const useThrottle = (func, limit) => {<br>
  const lastRun = useRef(Date.now());<br>
  return useCallback(<br>
    (...args) => {<br>
      const now = Date.now();<br>
      if (now - lastRun.current >= limit) {<br>
        func(...args);<br>
        lastRun.current = now;<br>
      }<br>
    },<br>
    [func, limit]<br>
  );<br>
};<br>
export default useThrottle;</p>

登入後複製

使用油門鉤


<p>import React, { useEffect } from "react";<br>
import useThrottle from "./useThrottle";</p>

<p>const ScrollComponent = () => {<br>
  const handleScroll = () => {<br>
    console.log("Scrolled!");<br>
  };<br>
  const throttledScroll = useThrottle(handleScroll, 500);<br>
  useEffect(() => {<br>
    window.addEventListener("scroll", throttledScroll);<br>
    return () => window.removeEventListener("scroll", throttledScroll);<br>
  }, [throttledScroll]);<br>
  return <div style={{ height: "200vh" }}>Scroll down to see the effect</div>;<br>
};<br>
export default ScrollComponent;</p>

登入後複製