Javascript定时器已经是运行只有在刷新的时候才会重复计时，如何防止计时重复

Question

大家好，我有一个项目，但我在制作项目时遇到了问题。我已经为考试计时器做了一个代码，它已经成功倒计时了。我遇到的问题是当我刷新网页时，计时器返回到初始计算。请帮我解决一下。我正在使用 laravel 框架。

var upgradeTime= {{$d->time*60}};
var seconds = upgradeTime;

function timer() {
  var days        = Math.floor(seconds/24/60/60);
  var hoursLeft   = Math.floor((seconds) - (days*86400));
  var hours       = Math.floor(hoursLeft/3600);
  var minutesLeft = Math.floor((hoursLeft) - (hours*3600));
  var minutes     = Math.floor(minutesLeft/60);
  var remainingSeconds = seconds % 60;
  function pad(n) {
    return (n < 10 ? "0" + n : n);
  }
  document.getElementById('time').innerHTML = pad(hours) + ":" + pad(minutes) + ":" + pad(remainingSeconds);
  if (seconds == 0) {
    clearInterval(countdownTimer);
    alert('Waktu habis.');
    document.getElementById("regForm").submit();
  } else {
    seconds--;
  }
}
var countdownTimer = setInterval('timer()', 1000);

Answer 1

如果您希望倒数计时器在您刷新页面时继续，您应该将 "remaining time" 存储在某个位置：您可以通过 javascript 或将其存储在您的 cookie 或本地存储中您可以发送 ajax 请求并将其存储在您的服务器中。

对于cookie中的JS解决方案，可以这样做：（setCookie和getCookie函数见this question）

    var upgradeTime= {{$d->time*60}};

    var seconds;
    var countdownTimer;

    function timer() {
        /// YOUR TIMER CODE HERE
        /// JUST store the remaining time in cookie at the end:
        setCookie('remainingTime', seconds, 1);
    }

    $(document).ready(function () {
        var remainingTime = 0;
        if (getCookie('remainingTime')) {
            //get from cookie if it was previously stored
            remainingTime = getCookie('remainingTime');
            console.log(getCookie('remainingTime'));
        } else {           
            //use the default value
            remainingTime = upgradeTime;
            setCookie('remainingTime', remainingTime, 1);
        }
        if (remainingTime > 1) {
            seconds = remainingTime;
            countdownTimer = setInterval(timer, remainingTime);
        }
    });

Answer 2

为了实现这一点，您可以将当前时间存储到存储器中，也可以从他们的（如果可用）中使用它。

var upgradeTime= {{$d->time*60}};
var seconds = upgradeTime;
var prevSeconds = localStorage.getItem('timerSeconds');

// assign prev seconds to current seconds.
if(prevSeconds){
 seconds = prevSeconds
}


function timer() {

  // set seconds into local storage
  localStorage.setItem('timerSeconds', seconds);

  var days        = Math.floor(seconds/24/60/60);
  var hoursLeft   = Math.floor((seconds) - (days*86400));
  var hours       = Math.floor(hoursLeft/3600);
  var minutesLeft = Math.floor((hoursLeft) - (hours*3600));
  var minutes     = Math.floor(minutesLeft/60);
  var remainingSeconds = seconds % 60;
  function pad(n) {
    return (n < 10 ? "0" + n : n);
  }
  document.getElementById('time').innerHTML = pad(hours) + ":" + pad(minutes) + ":" + pad(remainingSeconds);
  if (seconds == 0) {
    clearInterval(countdownTimer);
    alert('Waktu habis.');
    document.getElementById("regForm").submit();
  } else {
    seconds--;
  }
}
var countdownTimer = setInterval('timer()', 1000);

希望对您有所帮助。

Javascript定时器已经是运行只有在刷新的时候才会重复计时，如何防止计时重复

Javascript timer is already running only when it is refreshed the time is repeated, how to prevent time from being repeated

javascript

php

laravel

timer

countdown