实际应用：搜索、滚动和调整大小

在实时搜索组件中，请维护两个相互独立的状态变量：inputValue 用于保存原始输入（每次按键都会更新，从而保持输入框的响应性），debouncedQuery 则来自 useDebounce(inputValue, 300)（停止输入 300 毫秒后更新，并触发接口请求）。这种分离既能提供即时的视觉反馈，又能避免请求过于频繁。

用户一开始输入就应显示加载旋转指示器，而不应等到接口请求开始时才显示。每当 inputValue !== debouncedQuery 时，都应将 isLoading: true，因为防抖等待期间二者尚未同步。查询稳定且获取完成后，再将其设为 false。这样，用户在整个过程中都能看到响应及时的加载指示器。

视差效果或阅读进度条会根据滚动位置更新。请使用 16 毫秒的延迟，将滚动处理函数限制为最高每秒 60 帧：const throttledScrollY = useThrottle(scrollY, 16)。这样无需在滚动的每个像素变化时都重新计算位置，用户界面仍能平滑更新。

监听窗口大小调整并重新计算布局时，最好使用防抖而不是节流。布局计算只需在用户完成调整后运行一次。请对窗口尺寸使用 200 毫秒的防抖。在拖动调整大小期间，用户界面可以显示简化状态；停止调整后再显示重新计算的布局。

当 debouncedQuery 发生变化时，请创建新的 AbortController，并将其 signal 传递给 fetch(url, { signal })。返回一个会调用 controller.abort() 的清理函数。当新的防抖查询到达时，这会取消先前查询仍在进行的请求，避免较慢的早期响应覆盖较快的后续响应所造成的竞态条件。

如果没有 AbortController，用户输入“re”、等待片刻后再输入“react”时，第二个查询可能会因为缓存而先于第一个查询返回。搜索结果会短暂显示 React 的结果，随后又被过时的“re”结果覆盖。AbortController 会通过完全取消较早的请求来避免这种情况。

下拉菜单将接口请求的防抖与输入显示的即时状态结合起来。inputValue 控制文本框中显示的内容。useDebounce(inputValue, 250) 控制何时发起建议获取请求。建议列表根据获取结果状态进行渲染，该状态与这两个输入状态彼此独立。

异步表单验证（例如检查电子邮件地址是否已存在）应使用防抖，以免每次按键都向服务器发送请求。请对字段值使用 400 毫秒的防抖，并在依赖防抖值的 useEffect 中发起验证请求。验证等待期间，请在字段中显示加载旋转指示器。

防抖非常适合在用户输入时自动保存表单内容。请对表单值对象设置 1000 毫秒的防抖。当防抖值发生变化时，触发保存到 localStorage 或接口端点的操作。防抖等待期间，用户会看到“正在保存……”指示器，请求完成后则显示“已保存”。

延迟值属于用户体验决策。对于搜索，200 到 300 毫秒可以在响应速度和减少请求之间取得平衡。对于调整大小，150 到 200 毫秒是可以接受的，因为用户预期布局会在调整后稳定下来。对于自动保存，1000 毫秒能让用户有时间输入一个句子后再保存。请根据预期的交互速度进行调整。

实际应用通常需要同时进行多项优化。文档编辑器可能会对自动保存使用防抖（1 秒），对字数计算使用节流（500 毫秒），并使用 IntersectionObserver 进行分析。这些技术很容易组合，因为每种技术都在自己的计时器和范围内独立运行。

为什么应该将 AbortController 与防抖的搜索查询结合使用？

请对搜索输入、调整大小处理函数和表单自动保存使用 useDebounce。请对滚动和鼠标移动使用 useThrottle。始终将经过防抖的接口请求与 AbortController 结合使用，以避免竞态条件。当 inputValue !== debouncedQuery 时，请始终显示加载状态，从而让用户界面保持响应并提供清晰反馈。