为什么我的计时器需要第二次重新加载才能显示/重新启动

Question

为什么我的倒计时代码，一旦时间达到零并且页面刷新，在第一次重新加载时(倒计时完成后(不显示值？ 它们仅在第二次重新加载后显示？

我正在尝试让逻辑工作，因为倒计时可以在重新加载后重新启动/重新触发，但只能在完成一定时间后。我几乎拥有它，但试图弄清楚为什么需要重新加载 2 次才能重新开始倒计时......

// 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

请检查这个小提琴。https://jsfiddle.net/jefzobo7/

我发现了几个错误。

1. time_now是永远找不到的，因此它不会第二次工作。

'2. 一旦其值小于 0，就不会在本地存储中清除事物，也不会清除超时。

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

希望这有帮助。如果出现问题，请告诉我:)