Szukam wglądu, dlaczego mój licznik czasu javascript nie działa poprawnie. Właściwie działa świetnie, z wyjątkiem tego, że zatrzymuje się na 1 sekundę do końca i wyświetla alert. Po naciśnięciu przycisku ok odlicza się do ostatniej sekundy (0) i ponownie wyświetla alert. Nie mogę wymyślić, jak zatrzymać alert pojawiający się w 1 sekundzie do końca, a nie tylko na zero sekund ...
Zmieniłem kod tak, aby działał po 6 sekundach zamiast pełnych dziesięciu minut
function startTimer(duration, display) {
var timer = duration,
minutes, seconds;
setInterval(function() {
minutes = parseInt(timer / 60, 10);
seconds = parseInt(timer % 60, 10);
minutes = minutes < 10 ? "0" + minutes : minutes;
seconds = seconds < 10 ? "0" + seconds : seconds;
display.textContent = minutes + ":" + seconds;
if (--timer < 0) {
alert('Time has exceeded');
location.href = "http://nova.umuc.edu/~ct388a13/";
}
}, 1000);
}
window.onload = function() {
var tenMinutes = 60 * .1,
display = document.querySelector('#time');
startTimer(tenMinutes, display);
}<section>
<p id="transactionTimer">Act fast! This transaction must be completed in <span id="time">10:00</span> minutes</p>
</section>
0
Floyd Ladd
15 grudzień 2019, 14:36
1 odpowiedź
Dzieje się tak, ponieważ JS jest wykonywany, ponieważ aktualizacja DOM jest wyświetlana użytkownikowi. Ma to związek z pętlą zdarzeń JS i można je obejść, używając setTimeout z bardzo niskim limitem czasu, tj. 1 ms. Zobacz poniższy fragment kodu, aby zapoznać się z działającym przykładem
function startTimer(duration, display) {
var timer = duration,
minutes, seconds;
setInterval(function() {
--timer
minutes = parseInt(timer / 60, 10);
seconds = parseInt(timer % 60, 10);
minutes = minutes < 10 ? "0" + minutes : minutes;
seconds = seconds < 10 ? "0" + seconds : seconds;
display.textContent = minutes + ":" + seconds;
if (timer === 0) {
setTimeout(function(){
alert('Time has exceeded');
location.href = "http://nova.umuc.edu/~ct388a13/";
}, 1);
}
}, 1000);
}
window.onload = function() {
var tenMinutes = 60 * .1,
display = document.querySelector('#time');
startTimer(tenMinutes, display);
}<section>
<p id="transactionTimer">Act fast! This transaction must be completed in <span id="time">10:00</span> minutes</p>
</section>
0
bart
15 grudzień 2019, 15:13
Zmień minuty na sekundy.
– Grumpy
15 grudzień 2019, 15:20