提高 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>

登录后复制