I load messages by 20 pieces, update the state when it reaches 0 on scroll and twist the block 20 messages back. But after a few scrolls, the page freezes and I get a warning in the console: [Violation] 'message' handler took 187ms

I tried e.preventDefault() - didn't work, e.stopPropagation() - similar. Please tell me what I did wrong?

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();
                    }
                }}

Thanks.

CodePudding user response：

my func not working

onScroll={(e) => debounce((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();
                    }
                }, 250)}

CodePudding user response：

Each anti - shake function will do

function debounce(func, wait) {
    let timeout;
    return () => {
        if (timeout) {
            clearTimeout(timeout);
        }
        timeout = setTimeout(func, wait)
    }
}

onScroll={ debounce((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();
                    }
                }, 250)}