如何修复在加载消息的情况下滚动块时花费200ms的violetion

Question

我按20条加载消息，当滚动到0时更新状态，并将块20条消息扭转回来。但滚动几下后，页面冻结，我在控制台中收到警告：[违规]"消息"处理程序占用187ms

我尝试了e.preventDefault((-不起作用，e.stopPropagation((-类似。请告诉我我做错了什么？

onScroll={(e) => {
if(e.target.scrollTop < 1) {
const msgID = prevMessages.length ? parseInt(prevMessages[0].id) : parseInt(messages[0].id);
console.log(msgID);
socket.emit('getPrevMessages', {roomId, msgID});
e.target.scrollTo(0, e.target.querySelector('.direct-chat-msg:nth-child(20)').offsetTop);
e.stopPropagation();
}
}}

谢谢。

Answer 1

import { useState, useCallback } from 'react';
function debounce(func, wait) {
let timeout;
return () => {
if (timeout) {
clearTimeout(timeout);
}
timeout = setTimeout(func, wait)
}
}
const changeHandler = (e) => {
if(e.target.scrollTop < 1) {
const msgID = prevMessages.length ? parseInt(prevMessages[0].id) : parseInt(messages[0].id);
console.log(msgID);
socket.emit('getPrevMessages', {roomId, msgID});
e.target.scrollTo(0, e.target.querySelector('.direct-chat-msg:nth-child(20)').offsetTop);
e.stopPropagation();
}
}
const debouncedChangeHandler = useCallback(
debounce(changeHandler, 250)
, []);         
onScroll={ debouncedChangeHandler}

Answer 2

正在工作但我的处理程序没有更新状态消息和prevMessages所有时间两个空数组

const debounce = (func, wait) => {
let timeout;
return (() => {
if (timeout) {
clearTimeout(timeout);
}
timeout = setTimeout(() => func(), wait)
})();
}
const changeHandler = (e) => {
console.log(e);
if(e.target.scrollTop < 1) {
const msgID = prevMessages.length ? parseInt(prevMessages[0].id) : parseInt(messages[0].id);
console.log(msgID);
socket.emit('getPrevMessages', {roomId, msgID});
//e.stopPropagation();
}
}
const debouncedChangeHandler = useCallback((e) => debounce(() => changeHandler(e), 250),[]);