1

he desarrollado con mucho sudor un mini proceso "countdown" que se activa solo cuando el objeto esta visible en la pantalla. El problema que este se repite a partir de ahí siempre que hago scroll con el ratón y solo debería pasar una vez

Os dejo el codigo JS por aqui:

window.addEventListener('scroll', function (event) {
var element = document.querySelector('#main-container');
var position = element.getBoundingClientRect();
if (position.top < window.innerHeight) {
    var timeleft = 75;
    var downloadTimer = setInterval(function () {
        if (timeleft <= 0) {
            clearInterval(downloadTimer);
            document.getElementById("countdown").innerHTML = "0,-";
        } else {
            document.getElementById("countdown").innerHTML = timeleft + ",-";
        }
        timeleft -= 1;
    }, 20);
}

});

Si alguno me pudiese ayudar, se lo agradecería muchísimo. Un saludo

1
  • 2
    Podrías añadirle a #main-container una clase cuando hayas ejecutado tu función. Luego, en el if que tienes preguntas si #main-container tiene dicha clase y así en caso de tenerla evitas que se vuelva a ejecutar lo que no quieres que haga de nuevo.
    – phpMyGuel
    Commented el 16 jul. 2021 a las 12:00

1 respuesta 1

0

Los eventos se pueden añadir y también se pueden eliminar. Los añades con elemento.addEventListener(evento, handler) y los eliminasa con elemento.removeEventListener(evento, handler).
Si quiers que el evento solo se ejecute UNA vez pues lo desactivas en la función que se dispara la primera vez que ocurre.


eScroll= function (event) {
window.removeEventListener('scroll',eScroll);
var element = document.querySelector('#main-container');
var position = element.getBoundingClientRect();
if (position.top < window.innerHeight) {
    var timeleft = 75;
    var downloadTimer = setInterval(function () {
        if (timeleft <= 0) {
            clearInterval(downloadTimer);
            document.getElementById("countdown").innerHTML = "0,-";
        } else {
            document.getElementById("countdown").innerHTML = timeleft + ",-";
        }
        timeleft -= 1;
        }, 20);
    }
}
window.addEventListener('scroll',eScroll);

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.