es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Cómo detener el intervalo en JavaScript?

11 Jul, 2023 Programación

En este momento estoy tratando de crear una presentación de diapositivas para imágenes (cuando se hace clic en una flecha, otra imagen se desliza, todas las imágenes están en una fila en html). No estoy utilizando el método de desplazamiento. Las imágenes se están moviendo, pero parece que no puedo detener el intervalo.
Quería preguntar cómo detener el intervalo? ¿Qué es algo que me falta?

const icons = document.querySelectorAll(".icons i");
const imageDiv = document.querySelector(".imageDiv");

let positionRight = 0;

function addPositionRight () {
    positionRight += 1;
    imageDiv.style.right = `${positionRight}%`;
}

icons[1].onclick = () => {
    setInterval(addPositionRight, 10);
    if (positionRight === 100) {
        clearInterval(addPositionRight)
    }
}
Tags:  , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Para detener el intervalo, necesitas utilizar el método clearInterval() y pasarle el ID de intervalo devuelto por setInterval(). En este caso, puedes asignar el ID de intervalo a una variable y limpiarlo cuando la posición llegue al 100%.

    Para hacer esto, puedes modificar tu código de la siguiente manera:

    const icons = document.querySelectorAll(".icons i");
const imageDiv = document.querySelector(".imageDiv");

let positionRight = 0;
let intervalID;

function addPositionRight () {
    positionRight += 1;
    imageDiv.style.right = `${positionRight}%`;
    if (positionRight === 100) {
        clearInterval(intervalID);
    }
}

icons[1].onclick = () => {
    intervalID = setInterval(addPositionRight, 10);
}

    Aquí, hemos declarado una variable intervalID y le hemos asignado el valor devuelto por setInterval(). En la función addPositionRight(), verificamos si la posición ha alcanzado el 100% y luego limpiamos el intervalo utilizando clearInterval(intervalID).

    Cuando se hace clic en la flecha derecha, simplemente iniciamos el intervalo llamando a setInterval(addPositionRight, 10) y asignamos el ID de intervalo devuelto a intervalID.

    Con esta modificación, el intervalo se detendrá una vez que la posición alcance el 100% y las imágenes dejarán de deslizarse.

Comments are closed.