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

Question

hello guys i have a project and i'm having problems in making my project. I already made a code for the exam timer and it has succeeded in counting down. the problem I experienced was when I refreshed the web page, the timer returned to the initial calculation. Please help me how to fix it. i'm using laravel framework.

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);

When you refresh the page, the whole code starts again and the timer starts again counting down and it is the expected behavior. So, what is the problem? — Ali Khalili, Nov 03 '19 at 05:05
I mean, if i set time example is 10 minutes, for example the time has passed for 2 minutes and the remaining time is 8 minutes left. if the page is refreshed the time should continue counting the remaining time is 8 minutes — YFDR, Nov 03 '19 at 05:17
To do that, you have to store the "remaining time" of the timer and when you initialize the timer, use the stored value. You can store it in cookie (in your JS) or you can send it with Ajax to your server. — Ali Khalili, Nov 03 '19 at 05:24
that's the problem that I face, I've tried to set a cookie but still failed. Can you help me, please ? — YFDR, Nov 03 '19 at 05:39

Ali Khalili · Answer 1 · 2019-11-03T09:49:30.890

If you want your count down timer to continue when you refresh the page, you should store the "remaining time" some where: you can store it in your cookie or the local storage by javascript or you can send an ajax request and store it in your server.

For the JS solution in cookie, you can do something like this: (for setCookie and getCookie functions, see 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);
        }
    });

You are welcome & it is my pleasure. If the answers was useful for you, up vote the answer and if this (or other answer) is the answer you were looking for, select it as the "accepted answer" (for this case & future ones). — Ali Khalili, Nov 03 '19 at 14:52

score 0 · Accepted Answer · answered Nov 03 '19 at 06:02

In order to achieve this, you can store your current time into storage and also use it from their(if available).

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);

I hope this will help you.

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

2 Answers2