Considere el siguiente código dentro de un enlace personalizado de React:

 function createFadeOut() { if (!isDown && fading) { if (lineQueue.length !== 0) fadeOut(lineQueue.shift()); else addLine(line => { return []; }); } if (isDown && fading) { console.log('DOWN!'); } } function fadeOut(line) { //code } } setInterval(createFadeOut, 60);

Entonces, lo que quiero es que suceda un conjunto de acciones en un intervalo de tiempo discreto, según el estado del mouse y otro evento. isDown se establece cuando se llaman los eventos del mouse. el desvanecimiento es un estado booleano que solo se llama al hacer clic en un botón.

El comportamiento específico es que una lista emerge de un elemento y llama a una función cada 60 fotogramas cuando el mouse está arriba, Y la lista y otras acciones se restablecerán si se vuelve a presionar el mouse.

Por supuesto, estoy luchando para configurar correctamente el comportamiento.

• isDown no representa el estado del mouse en absoluto cuando se llama a la función mediante un setInterval. La mayoría de las veces, siempre se establecerá en verdadero cuando ya dejé el mouse solo.
• El uso de un gancho useEffect, por lo que siempre representa el estado real del mouse, es problemático, solo se llamará cuando ocurra un renderizado y no en un intervalo.
• Los mismos problemas si solo coloco la función en los eventos del mouse y uso setTimeouts, especialmente debido a que mouseUp solo se llama en algunos cuadros.