Estoy detectando un final de desplazamiento con clearTimeout.
const Component= ({container}) => { const timeoutRef = useRef<number>(0) const handleScroll = { clearTimeout(timeoutRef.current) timeoutRef.current = setTimeout(function () { if(!timeoutRef.current){ // 'no scroll in progress, do something' } }, 100) } useEffect(() => { container.addEventListener('scroll', handleScroll, true) }, []) }Pero el timeoutRef no se restablece cuando se vuelve a desplazar, sino que su valor solo aumenta. ¿Cómo arreglar eso?
Así es como funciona setTimeout. Cada vez que genera un tiempo de espera, genera un nuevo identificador. Utiliza ese identificador para cancelar el tiempo de espera. El tiempo de espera no borra la variable.
Si se dispara setTimeout, eso significa que no se canceló. En su caso, eso significa que el usuario dejó de desplazarse.
timeoutRef.current = setTimeout(function () { console.log('User is done scrolling'); }, 100)