目录
-
去抖：战略上的拖延
-
节流：控制事件频率
-
在 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中文网其他相关文章！
