如何在TypeScript-React应用中实现API调用的防抖与节流？

结合防抖和节流可以完美解决连续输入下的API调用频率问题：既能避免用户快速打字时频繁触发请求（防抖），又能防止用户持续输入导致长时间不发起请求（节流）。下面是具体实现方案：

1. 实现通用的防抖节流组合函数 #

这个函数会先判断距离上次调用是否超过节流间隔，如果是则立即触发；否则启动防抖定时器，若后续有新输入则重置定时器，确保最后一次输入结束后仍会触发调用。同时添加清除方法，避免组件卸载后内存泄漏：

type Func = (...args: any[]) => void;
type DebouncedThrottledFunc = Func & { clear: () => void };

function debounceThrottle(func: Func, debounceDelay: number, throttleInterval: number): DebouncedThrottledFunc {
  let timeoutId: NodeJS.Timeout | null = null;
  let lastCallTime = 0;

  const wrapper = function (...args: any[]) {
    const now = Date.now();

    // 超过节流间隔，立即执行并更新时间
    if (now - lastCallTime >= throttleInterval) {
      func.apply(this, args);
      lastCallTime = now;
      timeoutId && clearTimeout(timeoutId);
      timeoutId = null;
    } else {
      // 未到间隔，重置防抖定时器
      timeoutId && clearTimeout(timeoutId);
      timeoutId = setTimeout(() => {
        func.apply(this, args);
        lastCallTime = Date.now();
      }, debounceDelay);
    }
  };

  // 添加清除定时器的方法
  wrapper.clear = () => {
    timeoutId && clearTimeout(timeoutId);
    timeoutId = null;
  };

  return wrapper;
}

2. 在React组件中集成 #

修改你的SearchInput组件，使用useRef保存防抖节流函数的引用，避免每次渲染重新创建；同时在组件卸载时清除定时器：

import React, { useState, useRef, useEffect } from 'react';

interface Props {
  onSearch: (query: string) => void;
}

const SearchInput: React.FC<Props> = ({ onSearch }) => {
  const [searchText, setSearchText] = useState('');
  // 用useRef保存防抖节流函数实例
  const debouncedThrottledSearch = useRef<DebouncedThrottledFunc | null>(null);

  // 初始化/更新防抖节流函数
  useEffect(() => {
    debouncedThrottledSearch.current = debounceThrottle(onSearch, 300, 1000);

    // 组件卸载时清除定时器
    return () => {
      debouncedThrottledSearch.current?.clear();
    };
  }, [onSearch]);

  // 处理搜索文本变化
  useEffect(() => {
    if (!searchText.trim()) {
      // 空输入时立即触发，提升体验
      onSearch('');
      return;
    }
    debouncedThrottledSearch.current?.(searchText);
  }, [searchText, onSearch]);

  return (
    <input
      type="text"
      value={searchText}
      onChange={(e) => setSearchText(e.target.value)}
      placeholder="输入关键词搜索..."
    />
  );
};

3. 参数说明与优化建议 #

• debounceDelay：防抖延迟，示例设为300ms，即用户停止输入300ms后触发调用
• throttleInterval：节流间隔，示例设为1000ms，即每1秒至少触发一次调用
• 可根据业务场景调整参数，比如搜索类场景防抖设200-500ms，节流设800-1500ms
• 如果需要支持取消正在等待的调用，可以将clear方法暴露给父组件调用

内容的提问来源于stack exchange，提问作者Jacob Hansen