Estoy escribiendo una función javascript vainilla para agregar una animación de desplazamiento de página a mi sitio web. El problema es que quiero que el detector de eventos se detenga durante el tiempo de milisegundos especificado para dar tiempo a que se complete la animación, ya que si me desplazo normalmente, la animación sucederá varias veces una tras otra.
/* Event handler for scroll event */ // This is a function which allows a time to be passed in miliseconds. This function will then cause a sleep effect for the specified ms time function sleep(ms) { return new Promise(resolve => setTimeout(resolve, ms)); } // Initial state var iniState = 0; // Adding scroll event window.addEventListener('scroll', function(){ // Detects new state and compares it with the old one if ((document.body.getBoundingClientRect()).top > iniState) console.log('up'); else console.log('down'); // Saves the new position for iteration. iniState = (document.body.getBoundingClientRect()).top; sleep(2000).then(() => { console.log("test"); }); });Probé la función de tiempo de espera, pero esto solo retrasó el detector de eventos en lugar de hacer una pausa por el período de tiempo. Este es un enlace a la consola en el navegador si eso hace que el problema sea más fácil de entender.
En resumen, estoy tratando de hacer que un detector de eventos escuche un evento de desplazamiento, luego espere 2000 milisegundos para esperar a que se complete la animación. Después de esto, el detector de eventos comenzará a escuchar nuevamente un evento de desplazamiento nuevamente.
Creo que cada vez que un navegador detecta un evento de desplazamiento, creará una nueva función usando su plantilla y la colocará en una pila.
Por ejemplo: desplazamiento detectado: pila de llamadas a las 7:41:20 = [ function_created_at_7:41:20s ]
El siguiente pergamino detectado a las 7:41:21 s:
call stack = [ function_created_at_7:41:20s, function_created_at_7:41:21s ]dado que la promesa y el tiempo de espera son de ejecución asincrónica, esperan y permanecen en la pila de llamadas.
Después de que pasen los 2000, se ejecutará la devolución de llamada de función_creada_a las_7 function_created_at_7:41:20s de suspensión
Es posible que deba usar referencias globales y algunos ifs para mantener la función de desplazamiento en reposo.
let is_waiting = false; document.addEventListener("scroll",(e) => { if(!is_waiting) { console.log("scrolling..."); is_waiting = true; setTimeout(() => { is_waiting = false; },2000); } })let lastScrollStart window.addEventListener('scroll', () => { const scrollStart = lastScrollStart = performance.now() // timestamp const elAnimated = document.querySelector(...) elAnimated.addEventListener('animationend', function onAnimationEnd() { elAnimated.removeEventListener('animationend', onAnimationEnd) if (scrollStart === lastScrollStart) { ... } }) })