MomentJS與差異倒計時

我正在構建會話超時作爲使用MomentJS庫的Web應用程序的一部分。到目前爲止（下圖）我所知道的是timeToExpire與用戶登錄時間以及會話到期時的差異（以秒爲單位）。但是，當使用setInterval顯示倒數時鐘時，diff是不是每秒重新計算，而是時鐘從不更新。MomentJS與差異倒計時

有人能指出我發生什麼問題的正確方向嗎？

const access_ttl = 3600; 
 

 
const now = moment(); 
 

 
const login_timestamp = moment('2017-02-19 17:31:58+00:00'); 
 
const expire_timestamp = login_timestamp.add(access_ttl, 's'); 
 

 
const timeToExpire = expire_timestamp.diff(now, 'seconds'); 
 

 
function displayClock(inputSeconds) { 
 
    const sec_num = parseInt(inputSeconds.toString(), 10); 
 
    const hours = Math.floor(sec_num/3600); 
 
    const minutes = Math.floor((sec_num - (hours * 3600))/60); 
 
    const seconds = sec_num - (hours * 3600) - (minutes * 60); 
 
    let hoursString = ''; 
 
    let minutesString = ''; 
 
    let secondsString = ''; 
 
    hoursString = (hours < 10) ? "0" + hours : hours.toString(); 
 
    minutesString = (minutes < 10) ? "0" + minutes : minutes.toString(); 
 
    secondsString = (seconds < 10) ? "0" + seconds : seconds.toString(); 
 
    return hoursString + ':' + minutesString + ':' + secondsString; 
 
} 
 

 
function timer() { 
 
    $('.output').html(`Expires in: ${displayClock(timeToExpire)}`) 
 
} 
 

 
setInterval(timer, 1000)

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.17.1/moment.min.js"></script> 
 

 
<div class="output"></div>

來源

2017-02-19 MindVox

有非常簡單的倒計時，例如[*最簡單的可能的JavaScript倒數計時器？]（http://stackoverflow.com/questions/20618355/the-simplest-possible-javascript-countdown-timer）。請注意，* setInterval *不會在指定的延遲時間內運行，因此您的時鐘將緩慢漂移並且似乎會不時跳過一秒。 – RobG

您還沒有更新，現在（）或timeToExpire值，因此要傳遞到displayClock值始終是相同的。

鏈接完成JS小提琴：https://jsfiddle.net/xzyjdb1g/2/

var now, timeToExpire; 

function updateTime() { 

    now = moment(); 

    timeToExpire = expire_timestamp.diff(now, 'seconds'); 
} 

function timer() { 
    updateTime(); 
    $('.output').html(`Expires in: ${displayClock(timeToExpire)}`) 
}

來源

2017-02-19 18:13:10

感謝您的信息 – MindVox

MomentJS與差異倒計時

回答

相關問題