Cargo mensajes por 20 piezas, actualizo el estado cuando llega a 0 en el desplazamiento y giro el bloque 20 mensajes hacia atrás. Pero después de algunos desplazamientos, la página se congela y recibo una advertencia en la consola: [Violación] El controlador de 'mensaje' tardó 187 ms
Probé e.preventDefault() - no funcionó, e.stopPropagation() - similar. Por favor dime que hice mal?
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(); } }}Gracias.
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}El trabajo pero mi controlador no actualiza los mensajes de estado y los mensajes previos todo el tiempo dos matrices vacías
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),[]);