如何在reactjs滚动聊天中更改消息状态？滚动时触发太多事件

如何解决如何在reactjs滚动聊天中更改消息状态？滚动时触发太多事件

我一直在尝试在 React js 中更改滚动消息的状态。为此，我使用了 lodash 油门和去抖动，但它在滚动时触发了太多事件。你能帮我解决这个问题吗？例子会很棒。提前致谢。

  function debounce(method,delay) {
    clearTimeout(method._tId);
    method._tId = setTimeout(function () {
      method();
    },delay);
  }

  useEffect(() => {
  if (scrollRef.current) {
    scrollRef.current.addEventListener('scroll',(event) => {
      debounce(() => handleScroll(scrollRef.current),1000);
    });
  }


const handleScroll = (current) => {
let status = 'new';
let unreadIDS = [];
if (messages.length > 0) {
  for (let i = 0; status != 'old'; i++) {
    if (!messages[i].mine && messages[i].status === 'new') {
      if (current.scrollTop <= messagesPosition[i] <= current.scrollTop + current.offsetHeight) {
        unreadIDS.push(messages[i].id);
        // }
      }
      status = 'old';
    } else {
      status = 'old';
    }
  }
  if (unreadIDS.length > 0) {
    console.log('nnn: ',unreadIDS);
    socket.send(JSON.stringify({
      "type": "change_message_status","room_id": messages[0].room_id,"apply": "specific","message_ids": unreadIDS,}))
    unreadIDS = [];
  }
}

         <div
          className="Chat-Messages"
          id="scrollableDiv"
          ref={(r) => {
            scrollRef.current = r;
          }}
        >
          <DragNDrop data={data} dispatch={dispatch} />
          <div
            className="dotsContainer"
            // style={{ display: 'flex' }}
            style={{ display: isTyping ? 'flex' : 'none' }}
          >
            <span>typing</span>
            <span id="dot1"></span>
            <span id="dot2"></span>
            <span id="dot3"></span>
          </div>

请帮忙