监测React用户停止输入：使用Debounce优化输入体验

function debounce(func, timeout = 1000) {
  let timer;
  return (...args) => {
    clearTimeout(timer);
    timer = setTimeout(() => {
      func.apply(this, args);
    }, timeout);
  };
}

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

const ChatInput = (props) => {
  const [message, setMessage] = useState('');
  const socket = useRef(null); // 假设 socket 连接已初始化

  useEffect(() => {
    // 在组件挂载时初始化 socket 连接
    socket.current = //你的socket连接
    return () => {
      // 在组件卸载时关闭 socket 连接
      //socket.current.close();
    };
  }, []);


  const typingMessage = () => {
    if (socket.current) {
        socket.current.emit('typing', props.username);
    }
  };

  const saveInput = () => {
    console.log('User has stopped writing 1 second ago');
    if (socket.current) {
        socket.current.emit('stoppedTyping', props.username); // 发送停止输入的消息
    }
  };

  // 使用 debounce 函数
  const processChange = useRef(debounce(() => saveInput(), 1000));

  const handleInputChange = (e) => {
    setMessage(e.target.value);
    typingMessage(); // 发送"正在输入"消息
    processChange.current(); // 触发 debounce 函数
  };

  const sendMessage = () => {
    // 发送消息的逻辑
  };

  return (
    <div>
      <input
        value={message}
        onChange={handleInputChange}
        placeholder="Type a message here"
      />
      <button onClick={sendMessage}>Send</button>
    </div>
  );
};

export default ChatInput;