Vea mi código a continuación, estoy tratando de hacer que el temporizador de cuenta regresiva se detenga cuando se muestra un bs.modal y que se reanude nuevamente una vez que se oculta el modal. Esto funciona perfectamente si el modal se abre y luego se cierra, pero si intenta volver a abrir el modal, el temporizador simplemente continúa. Probablemente me estoy perdiendo algo obvio, pero no soy el mejor cuando se trata de JS.
(function countdown(remaining) { if(remaining === 0) { location.reload(true); } document.getElementById('countdown').innerHTML = remaining; $(document).on('shown.bs.modal', function(e) { console.log("modal triggered"); clearTimeout(timeout); }); $(document).on('hide.bs.modal', function(e) { console.log("modal closed"); countdown(remaining - 1); }); timeout = setTimeout(function(){ if(remaining != 0) { countdown(remaining - 1); } }, 1000); })(300);Parece que el problema con el código existente es un problema de tiempo que da como resultado que se establezcan múltiples tiempos de espera simultáneamente, algunos de los cuales nunca se pueden borrar porque su identificación se pierde. Es fácil entrar en una situación así cuando configura un nuevo tiempo de espera para cada iteración. Entonces, como mencioné, setInterval() es una mejor opción aquí. A continuación se muestra una solución utilizando setInterval(). También tenga en cuenta que está escrito para garantizar que cualquier intervalo existente se borre antes de que se sobrescriba su ID (en la función clearAndSetInterval).
(function (remaining) { var interval; var clearAndSetInterval = function () { clearInterval(interval); interval = setInterval(function (){ if (remaining <= 0) { clearInterval(interval); location.reload(true); } document.getElementById('countdown').innerHTML = remaining; remaining = remaining - 1; }, 1000); }; $(document).on('shown.bs.modal', function(e) { clearInterval(interval); }); $(document).on('hide.bs.modal', function (e) { clearAndSetInterval(); }); clearAndSetInterval(); })(300);