在 React 中实现用户输入停止检测的防抖策略

/**
 * 创建一个防抖函数，在指定延迟时间内没有再次调用时才执行
 * @param {Function} func - 要执行的函数
 * @param {number} delay - 延迟时间（毫秒）
 * @returns {Function} - 防抖后的函数
 */
function genericDebounce(func, delay) {
  let timeoutId; // 用于存储定时器ID

  // 返回一个新的函数，这个函数才是实际被调用的防抖函数
  const debounced = function(...args) {
    const context = this; // 保存当前上下文
    clearTimeout(timeoutId); // 每次调用时，清除之前的定时器

    // 设置新的定时器，在 delay 时间后执行 func
    timeoutId = setTimeout(() => {
      func.apply(context, args); // 使用 apply 确保 func 在正确的上下文执行
    }, delay);
  };

  // 额外提供一个取消防抖的函数，用于在组件卸载或特定场景下清除待处理的定时器
  debounced.cancel = () => {
    clearTimeout(timeoutId);
  };

  return debounced;
}

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

/**
 * React 自定义 Hook，用于创建一个防抖函数
 * @param {Function} callback - 要防抖的函数
 * @param {number} delay - 防抖延迟时间（毫秒）
 * @returns {Function} - 防抖后的函数
 */
function useDebounce(callback, delay) {
  const timeoutRef = useRef(null); // 用于存储定时器ID
  const latestCallback = useRef(callback); // 用于存储最新的回调函数引用

  // 确保 latestCallback.current 始终指向最新的 callback 函数
  useEffect(() => {
    latestCallback.current = callback;
  }, [callback]);

  // 返回一个稳定的防抖函数实例
  const debouncedFunction = useCallback((...args) => {
    if (timeoutRef.current) {
      clearTimeout(timeoutRef.current); // 清除之前的定时器
    }
    timeoutRef.current = setTimeout(() => {
      latestCallback.current(...args); // 执行最新的回调函数
    }, delay);
  }, [delay]); // 只有当 delay 变化时才重新创建防抖函数

  // 组件卸载时，清理任何待处理的定时器，防止内存泄漏
  useEffect(() => {
    return () => {
      if (timeoutRef.current) {
        clearTimeout(timeoutRef.current);
      }
    };
  }, []); // 空依赖数组确保只在挂载和卸载时运行

  return debouncedFunction;
}

import React, { useState, useEffect, useRef, useCallback } from 'react';
import { Input, Button } from 'antd'; // 假设使用 Ant Design 组件
import { SendOutlined } from '@ant-design/icons'; // 假设使用 Ant Design 图标

// 引入上面定义的 useDebounce 自定义 Hook
// import { useDebounce } from './hooks/useDebounce'; // 如果放在单独文件

const ChatInput = ({ username, socket }) => {
  const [message, setMessage] = useState('');

  // 定义当用户停止输入时需要执行的函数
  const handleUserStoppedTyping = useCallback(() => {
    console.log(`${username} 已经停止输入 10 秒。`);
    // 在这里可以发送 'stoppedTyping' 事件到服务器
    if (socket) {
      socket.emit('stoppedTyping', username);
    }
    // 或者执行其他业务逻辑，例如保存草稿、触发搜索等
  }, [username, socket]); // 依赖 username 和 socket

  // 使用 useDebounce Hook 创建一个防抖后的函数，延迟 10 秒 (10000 毫秒)
  const debouncedStoppedTyping = useDebounce(handleUserStoppedTyping, 10000);

  // 处理输入框内容变化的函数
  const handleInputChange = (e) => {
    const newValue = e.target.value;
    setMessage(newValue); // 更新输入框的状态

    // 每次输入时，都调用防抖函数，重新计时“停止输入”事件
    debouncedStoppedTyping();

    // 可以在这里发送“正在输入”事件到服务器
    if (socket) {
      socket.emit('typing', username);
    }
  };

  // 发送消息的函数
  const sendMessage = () => {
    if (message.trim()) {
      console.log('发送消息:', message);
      // 实际的消息发送逻辑，例如 socket.emit('sendMessage', { username, message });
      setMessage(''); // 清空输入框

      // 消息发送后，如果用户停止输入计时仍在进行，应立即取消
      // (如果 debouncedStoppedTyping 内部支持取消，可以在这里调用，
      // 但我们上面的 useDebounce 默认在组件卸载时才清理，这里可以忽略或根据需求增强)
      // 如果消息发送意味着用户已完成输入，可以立即触发一次 handleUserStoppedTyping
      // 或者确保防抖函数在发送后被重置。
    }
  };

  return (
    <div className="chat-input-container">
      <Input
        value={message}
        onChange={handleInputChange}
        placeholder="在此输入消息..."
      />
      <Button
        onClick={sendMessage}
        icon={<SendOutlined />}
        type="primary" // 假设 Ant Design 按钮类型
      />
    </div>
  );
};

export default ChatInput;