React如何延迟后仅触发一次函数并获取文本框最新输入值

你的代码重复触发的核心问题是timer是inputHandler内部的局部变量：每次输入触发onChange时，函数都会重新执行，timer会被重新赋值为null，之前调用setTimeout生成的定时器ID没有被持久化保存，clearTimeout(timer)实际清除的是当前作用域里的null，根本清不掉之前已经挂载的定时器。最终每一次输入都会生成一个独立的、不会被清除的1s定时器，输入几个字符就会触发几次回调。

方案1：useRef持久化定时器ID（最小改动适配原有写法） #

用useRef跨渲染周期保存定时器ID，保证每次触发输入事件时都能拿到上一次设置的定时器ID，正确清除未执行的旧定时器：

import { useRef, SyntheticEvent } from 'react';

// 组件内顶层位置声明
const timer = useRef<null | number>(null);

const inputHandler = (e: SyntheticEvent<HTMLInputElement>) => {
  // 清除上一个未执行的定时器
  if (timer.current) clearTimeout(timer.current);
  // 直接从事件对象取最新输入值
  const currentValue = e.currentTarget.value;
  // 设置新定时器
  timer.current = window.setTimeout(() => {
    console.log('触发逻辑，最新输入值：', currentValue);
    // 此处放置HTTP请求等实际业务逻辑即可
  }, 1000);
}

return <input type="text" onChange={inputHandler} name="userInput" />

方案2：useState + useEffect 状态驱动实现（规避作用域问题） #

把输入值存为组件状态，防抖逻辑放到useEffect中执行，完全规避你提到的作用域识别问题，逻辑拆分更清晰，也是React官方推荐的写法：

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

// 组件内顶层位置声明
const [userInput, setUserInput] = useState('');

// 输入回调只负责更新状态，无额外逻辑
const inputHandler = (e: SyntheticEvent<HTMLInputElement>) => {
  setUserInput(e.currentTarget.value);
}

// 监听输入值变化，统一处理防抖逻辑
useEffect(() => {
  // 首次加载输入框为空时不触发，可根据业务需求调整
  if (!userInput) return;

  const timer = setTimeout(() => {
    console.log('触发逻辑，最新输入值：', userInput);
    // 此处放置HTTP请求等实际业务逻辑即可
  }, 1000);

  // 清理函数：输入值变化、组件卸载时自动清除未执行的定时器
  return () => clearTimeout(timer);
}, [userInput])

return <input type="text" onChange={inputHandler} name="userInput" value={userInput} />

• 函数组件每次重渲染都会重新执行函数体，普通局部变量不会在多次渲染间保留值，需要跨渲染周期存储的定时器ID必须用useRef保存，或者放到useEffect作用域内通过清理函数处理
• 不要在定时器回调里读取过期的闭包变量，最新输入值要么在onChange触发时直接从事件对象获取传入回调，要么存为组件state在回调中读取
• 必须在新输入触发、组件卸载时清除未执行的定时器，避免重复触发和内存泄漏

内容的提问来源于stack exchange，提问作者Kgn-web