diffでMomentJSカウントダウン

Question

MomentJSライブラリを使用してWebアプリケーションの一部としてセッションタイムアウトを作成しています。私がこれまでに持っていたのは、ユーザがログインしてからセッションが終了するまでの差（秒）です（timeToExpire）。しかし、setIntervalを使用してカウントダウンクロックを表示すると、diffはではなく、が毎秒再計算され、クロックは決して更新されません。

誰かが間違っていることを正しい方向に向けることができますか？

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>

Answer 1

あなたは今（）またはtimeToExpire値を更新していないので、あなたがdisplayClockに渡している値は常に同じです。非常にシンプルなカウントダウンタイマーは、例えば、あり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)}`) 
}