Tengo un problema que es recurrente cada vez que trabajo en Javascript, y es que mi código parece estar entrando y saliendo, dependiendo de si me desplazo, cambio el tamaño de la pantalla, recargo, etc. Incluso parece que la velocidad de el cual me desplazo parece ser un factor (aunque, en esta situación, estoy tratando de crear un efecto de desplazamiento, que funciona siempre que me desplace lentamente). He tratado de encontrar soluciones casi constantemente desde que comencé a codificar JS, pero ni siquiera puedo entender por qué sucede esto, y ni siquiera sé qué hacer para encontrar las respuestas.
Generalmente, cuando creo funciones, trato de usar la siguiente estructura
document.addEventListener("click", function functionName() { /* function content */ });Sin embargo, esto realmente solo parece funcionar con efectos de clic, y tal vez flotar. para los efectos de desplazamiento, porque cambiar el tamaño de la pantalla hará que sucedan cosas extrañas, he intentado usar la siguiente estructura
function functionName() { /* function content */ }; document.addEventListener('scroll', functionName); window.addEventListener('load', functionName); window.addEventListener('resize', functionName);Esto generalmente funciona mejor y generalmente evita que el cambio de tamaño de la pantalla interfiera demasiado con los efectos de desplazamiento. Sin embargo, hace que el código que veo sea muy nervioso y defectuoso.
¿Hay una mejor manera de hacer esto, para que el efecto de desplazamiento aparezca siempre como debería, independientemente de si la pantalla cambia de tamaño o se desplaza, etc.? Además, ¿hay alguna manera de hacer que el código funcione mejor sin tener tres detectores de eventos separados para activar una sola función?
El desafío al que se enfrenta para otros eventos es que se pueden llamar 10 o 100 veces por segundo. Lo que necesita es acelerar las funciones a las que llama, especialmente si son costosas.
Le sugiero que mire makeThrottleFn en mi biblioteca xuu . Puede instalarlo y probarlo así:
const throttleFn = xuu._makeThrottleFn_({ _fn_ : onResizeFn, _delay_ms_: 250 }); // And now use this for windowresize window.addEventListener('resize', throttleFn);Por supuesto, hay muchas otras bibliotecas que ofrecen aceleración, así que siéntete libre de ir de compras.
El uso de document.addEventListener ("clic") ejecutará la función cada vez que se haga clic o se toque la pantalla. Y se aplica a todo el documento. Lo que significa que en cualquier lugar donde haga clic, se ejecutará el detector de eventos.
Usar el evento de desplazamiento es ejecutar el bloque de código varias veces. Esto creará resultados no deseados a menos que ponga algo para detenerlo. Por lo tanto, el uso de múltiples document.addEventListeners con "clic" y "desplazamiento" probablemente se superponga en algunos casos, lo que provocará que sucedan cosas extrañas con ambas funciones ejecutándose varias veces o al azar.