TextField onChange调用API：如何实现1秒节流？

别担心，这个需求其实挺常见的，用setTimeout搭配clearTimeout就能轻松实现你要的节流效果，我给你详细拆解一下怎么做：

核心逻辑很简单：每次用户输入时，先取消之前设置的延迟请求定时器，然后重新启动一个1秒后的定时器。只有当用户停止输入满1秒，这个定时器才会触发API请求。

1. 先存好定时器ID #

不管你用的是函数组件还是类组件，都需要一个地方来保存定时器的ID，这样每次输入时才能找到并取消它。比如在React函数组件里，用useRef是最合适的——它的值不会随组件重新渲染而重置：

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

function SearchInput() {
  const [inputVal, setInputVal] = useState('');
  // 用useRef存储定时器ID
  const timerRef = useRef(null);

  // 你的API请求函数，这里用fetch举例子
  const fetchSearchData = async (keyword) => {
    try {
      const res = await fetch(`/api/search?keyword=${keyword}`);
      const data = await res.json();
      // 这里处理返回的数据，比如更新列表或者状态
      console.log('请求结果:', data);
    } catch (err) {
      console.error('请求失败:', err);
    }
  };

2. 编写带节流的输入处理函数 #

在TextField的onChange事件里，我们要做两件事：更新输入框的值，然后处理节流逻辑：

const handleInputChange = (e) => {
    const value = e.target.value;
    setInputVal(value);

    // 先清除之前的定时器，避免短时间内重复触发请求
    if (timerRef.current) {
      clearTimeout(timerRef.current);
    }

    // 设置新的定时器，1秒后执行API请求
    timerRef.current = setTimeout(() => {
      // 可选：如果输入为空可以跳过请求，避免无效调用
      if (value.trim()) {
        fetchSearchData(value);
      }
    }, 1000); // 这里设置1000毫秒，也就是1秒
  };

3. 绑定事件并清理定时器 #

最后把处理函数绑定到输入框上，另外别忘了在组件卸载时清除定时器，防止内存泄漏：

// 组件卸载时清除定时器
  useEffect(() => {
    return () => {
      if (timerRef.current) {
        clearTimeout(timerRef.current);
      }
    };
  }, []);

  return (
    <input
      type="text"
      value={inputVal}
      onChange={handleInputChange}
      placeholder="输入内容开始搜索..."
    />
  );
}

export default SearchInput;

额外补充 #

• 如果是Vue项目，思路完全一致：在data里定义timerId，在输入框的@input事件里清除旧定时器、设置新定时器即可。
• 如果是类组件，可以把定时器ID存在实例属性（比如this.timerId）里，逻辑和上面大同小异。

这样改完之后，用户只有停止输入满1秒，才会触发一次API请求，完美解决频繁输入导致的重复请求问题～

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