MomentJS Countdown mit Diff

Question

Ich bin ein Sitzung Timeout als Teil einer Webanwendung mit der MomentJS-Bibliothek erstellen. Was ich bisher (unten) habe, ist der Unterschied zwischen timeToExpire (in Sekunden) seit der Anmeldung des Benutzers und dem Ablauf der Sitzung. Wenn jedoch eine Countdown-Uhr unter Verwendung von setInterval angezeigt wird, wird die diffNICHT jede Sekunde neu berechnet und stattdessen wird die Uhr nie aktualisiert.

Kann mir jemand in die richtige Richtung zeigen, was falsch läuft?

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

Sie sind nicht die jetzt() oder timeToExpire Werte zu aktualisieren und so der Wert, den Sie von Display vorbei sind, ist immer gleich.

Link-JS Fiddle zu vervollständigen: 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)}`) 
}