En este momento estoy tratando de crear una presentación de diapositivas para imágenes (cuando se hace clic en la flecha, se desliza otra imagen, todas las imágenes están en una fila en html). No estoy usando el método de desplazamiento. Las imágenes se mueven, pero parece que no puedo detener el intervalo. Quería preguntar cómo detener el intervalo. ¿Qué es algo que me estoy perdiendo?
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) } }setInterval devuelve un identificador que le permite borrar el intervalo
let myInterval; function addPositionRight () { positionRight += 1; imageDiv.style.right = `${positionRight}%`; if (positionRight === 100) { clearInterval(myInterval); } } myInterval = setInterval(addPositionRight, 10);El método setInterval devuelve un puntero a ese intervalo, luego simplemente lo pasa a clearInteral
const interval = setInterval(() => { console.log('inside interval'); }, 500); setTimeout(() => clearInterval(interval), 2000)Tienes que usar el método clearInterval de la siguiente manera,
const stopInterval = setInterval(addPositionRight, 10); clearInterval(stopInterval) //<----- use it where you want to stop it.más información: https://www.w3schools.com/jsref/met_win_clearinterval.asp