Tengo una presentación de diapositivas simple en la que quiero una función de "pausa" y "reproducir", con onClick, usando setInterval y clearInterval. El primer setInterval funciona bien. El siguiente clearInterval crea una pausa en el bucle, pero no restablece el ID de intervalo, por lo que el siguiente setInterval se está ejecutando demasiado rápido. Vi algunas publicaciones sobre este problema aquí, pero no resuelven el mío. Si alguien me puede ayudar, será genial!
let i = 0; var elements = document.querySelectorAll('.mes_elements'); function ma_fonction(){ elements[i].style.opacity = 1; for(let j = 0; j < elements.length; j++){ if(j!=i){ elements[j].style.opacity = 0; } } i++; if(i == elements.length){ i = 0; } } var lecture = true; var intervalId = setInterval(ma_fonction, 1500); document.querySelector('.ma_div').addEventListener('click', function() { if(lecture == true){ clearInterval(intervalId); // window.clearInterval(intervalId); doesn't work to lecture = false; }else{ setInterval(ma_fonction, 1500); // window.setInterval(ma_fonction, 1500); doesn't work to lecture = true; } }); .mes_elements { padding:1em; background:blue; margin: 1em; } <div class="ma_div"> <div class="mes_elements"></div> <div class="mes_elements"></div> <div class="mes_elements"></div> </div>En tu código aquí
}else{ setInterval(ma_fonction, 1500); // window.setInterval(ma_fonction, 1500); doesn't work to lecture = true; } No está configurando intervalId en el nuevo setTimeout, por lo que solo borra el primero y luego una var vacía.
cambiarlo a
}else{ intervalId = setInterval(ma_fonction, 1500); // window.setInterval(ma_fonction, 1500); doesn't work to lecture = true; }