En este JSfiddle, tengo un código en el que, si hace clic en el botón, automáticamente crea otro intervalo establecido dentro del anterior,
Tengo clearInterval pero, por alguna razón, no funciona.
(Intente hacer clic en el botón del temporizador varias veces)
<span>LIVE: Election results will refresh in <span id="time">2:00</span> minutes.</span> <input type="button" value="Timer" id="btn"> <script> $("#btn").on('click', function() { var twoMinutes = 60 * 2, display = document.querySelector('#time'); startTimer(twoMinutes, display); }); function startTimer(duration, display) { var timer = duration, minutes, seconds; var interval; clearInterval(interval); interval = setInterval(function() { minutes = parseInt(timer / 60, 10) seconds = parseInt(timer % 60, 10); minutes = minutes < 10 ? +minutes : minutes; seconds = seconds < 10 ? "0" + seconds : seconds; display.textContent = minutes + ":" + seconds; if (--timer < 0) { timer = duration; LoadCandidatesCharts(true); } }, 1000); } </script>El problema es que está llamando al interval var dentro del alcance de la función, mientras que debería declararlo en un alcance global, intente esto
var interval; // global var function startTimer(duration, display) { var timer = duration, minutes, seconds; clearInterval(interval); interval = setInterval(function() { minutes = parseInt(timer / 60, 10) seconds = parseInt(timer % 60, 10); minutes = minutes < 10 ? +minutes : minutes; seconds = seconds < 10 ? "0" + seconds : seconds; display.textContent = minutes + ":" + seconds; if (--timer < 0) { timer = duration; LoadCandidatesCharts(true); } }, 1000); }