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