提高 JavaScript 性能：了解去抖和节流

目录

• 去抖：战略上的拖延
  • 去抖动的工作原理
  • 去抖动示例
• 节流：控制事件频率
  • 节流的工作原理
  • 节流示例
• 在 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>

最后的想法

去抖动和节流都是增强现代应用程序性能不可或缺的技术。虽然去抖动非常适合搜索字段等输入，但限制最适合滚动等高频事件。 React 中的自定义挂钩（例如 useDebounce 和 useThrottle）使这些优化可以轻松地在您的应用程序中实现，从而确保更高效、响应更快的体验。

以上是提高 JavaScript 性能：了解去抖和节流的详细内容。更多信息请关注PHP中文网其他相关文章！