Why does my timer require a second reload in order to display/start again?

Question

Why is it that the my countdown code, once the time has reached zero and the page is refreshed, upon first reload (after the countdown finished) the values do not display? they only display after a SECOND reload?

I am trying to have the logic work in that the countdown can be restarted/re-fired after reload but only after a certain time of having been finished. I pretty much have it but am stuck trying to figure out why it takes 2 reloads to start the countdown over again...

// Time Pass Checker - Check if time has passed in order to run countdown again
function timepasschecker() {
  if ((Date.now() - deadline) > 3000 ) {
    localStorage.removeItem('t1');
    localStorage.setItem(time_now);
  }
};
// Number Logic
function render() {
  if (delay) {
    clearTimeout(delay);
    delay = null;
  }
  var diff = (deadline - Date.now()) / 1000;
  document.getElementById('d').innerHTML = Math.floor(diff / 86400);
  document.getElementById('h').innerHTML = Math.floor(diff / 3600);
  document.getElementById('m').innerHTML = Math.floor((diff / 60) % 60);
  document.getElementById('s').innerHTML = Math.floor(diff % 60);

  if (diff<=0) {
    document.getElementById('d').innerHTML = "0";
    document.getElementById('h').innerHTML = "0";
    document.getElementById('m').innerHTML = "0";
    document.getElementById('s').innerHTML = "0";
    //setTimeout(function(){ localStorage.removeItem('t1'); }, 15000);
  }
  delay = setTimeout(render,1000);
};

var deadline = localStorage.getItem('t1') ? parseInt(localStorage.getItem('t1')) : (Date.now() + 6000);
var delay = null;

timepasschecker();

localStorage.setItem('t1',deadline);

render();

Answer 1

Please check this fiddle. https://jsfiddle.net/jefzobo7/

Couple of mistakes i found.

1. time_now is undefinded forever, hence it doesnt work second time.

`2. things are not cleared in local storage once its values goes less than 0, also time out is not cleared.

// Time Pass Checker - Check if time has passed in order to run countdown again
var isIntialized=true;
function timepasschecker() {
  if ((Date.now() - deadline) > 3000 ) {
    localStorage.removeItem('t1');
    localStorage.setItem('t1',(Date.now()+6000).toString());
  }
};
// Number Logic
function render() {
  if (delay) {
    clearTimeout(delay);
    delay = null;
  }
  var diff = (deadline - Date.now()) / 1000;
  console.log("diff",diff);
  document.getElementById('d').innerHTML = Math.floor(diff / 86400);
  document.getElementById('h').innerHTML = Math.floor(diff / 3600);
  document.getElementById('m').innerHTML = Math.floor((diff / 60) % 60);
  document.getElementById('s').innerHTML = Math.floor(diff % 60);

  if (diff<=0) {
    document.getElementById('d').innerHTML = "0";
    document.getElementById('h').innerHTML = "0";
    document.getElementById('m').innerHTML = "0";
    document.getElementById('s').innerHTML = "0";
    //setTimeout(function(){ localStorage.removeItem('t1'); }, 15000);
    localStorage.removeItem('t1');
  }
    delay = setTimeout(render,1000);
   if(diff<=0){
    clearTimeout(delay);
   }

};

var deadline = localStorage.getItem('t1') ? parseInt(localStorage.getItem('t1')) : (Date.now() + 6000);
var delay = null;

timepasschecker();

localStorage.setItem('t1',deadline);

render();

Hope this helps. Let me know in case of issues :)