Estoy mostrando un temporizador en una ventana emergente modal de arranque. Estoy usando setInterval para iniciar un temporizador. Funciona bien por primera vez, pero después del cierre de la ventana emergente y cuando la abro nuevamente, el temporizador no aparece.
https://jsfiddle.net/8h49o7Lg/
código
var timer = setInterval(clock, 1000); var sec = 00; var min = 00; function clock() { sec += 1; if (sec == 60) { min += 1; sec = 00; } document.getElementById("timerid").innerHTML = min + ":" + sec; }Oh, eso es realmente simple, solo creas un nuevo temporizador cada vez que abres la ventana emergente, pero no te deshaces del anterior.
Creo que la solución más simple sería simplemente borrarlo en el momento en que intente asignarlo nuevamente.
var timer; function showtimer(){ if (timer) clearInterval(timer); timer = setInterval(clock, 1000); var sec = 00; var min = 00; function clock() { sec += 1; if (sec == 60) { min += 1; sec = 00; } document.getElementById("timerid").innerHTML = min + ":" + sec; } }Como mencioné en mi comentario, no borra el temporizador ya que era local para el showTimer
Aquí hay una mejor solución donde también restablezco la pantalla del temporizador y relleno los números
let timer; function showtimer() { timer = setInterval(clock, 1000); var sec = 00; var min = 00; function clock() { sec += 1; if (sec == 60) { min += 1; sec = 00; } document.getElementById("timerid").innerHTML = String(min).padStart(2, "0") + ":" + String(sec).padStart(2, "0"); } $('#myModal').modal('show'); } $(document).on('hidden.bs.modal', '#myModal', function(event) { clearInterval(timer); document.getElementById("timerid").innerHTML = "00:00"; }); <html lang="en"> <head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <button type="button" class="btn btn-info btn-lg" onclick="showtimer()">Open Modal</button> <div class="modal fade" id="myModal" role="dialog"> <div class="modal-dialog"> <!-- Modal content--> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal">×</button> </div> <div class="modal-body"> <div id="timerid">00:00</div> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> </div> </div> </div> </div> </div> </body> </html>