爲什麼我的計時器需要重新加載才能重新顯示/重新啓動？

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

希望這會有所幫助。讓我知道在遇到問題:)