¡Por favor, ayúdame! Hago una aplicación simple para alquilar bicicletas en el almacenamiento local. Cómo alert("Expired") cuando el contador llega a cero. Cuando coloco una alerta dentro del método setInterval, tengo una alerta que se repite cada segundo.
var interval = 5000; function reset() { localStorage.endTime = +new Date + interval; } if (!localStorage.endTime) { reset(); } var remaining = localStorage.endTime - new Date; setInterval(brojanje, 100) function brojanje() { if (remaining > 0) { $('#timer').text(Math.floor(remaining / 1000)); } else { return; } } <div Time remaining: <span id="timer"> </span> </div> <button onclick="reset()">Click me</button>Debe detener su temporizador usando la función clearInterval .
var interval = setInterval(brojanje, 100); function brojanje() { if (remaining > 0) { $('#timer').text(Math.floor(remaining / 1000)); } else { console.log('Alert and kill timer'); alert('STOP!'); clearInterval(interval); } }Aquí hay una versión en la que trabajé. También eliminé el uso de jquery.
<script> let duration = 5000 let end_time = 0 let the_interval function reset () { end_time = Date.now() + duration localStorage.endTime = end_time } function start_interval () { clearInterval(the_interval) let timer = document.querySelector("#timer") the_interval = setInterval(function () { let remaining = end_time - Date.now() if (remaining <= 0) { clearInterval(the_interval) return } timer.textContent = Math.floor(remaining / 1000) }, 100) } window.onload = function () { document.querySelector("#reset_button").addEventListener("click", function () { reset() start_interval() }) end_time = parseInt(localStorage.endTime) start_interval() } </script> <span>Time remaining:</span> <span id="timer"></span></div> <button id="reset_button">Click me</button>