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与差异倒计时

回答

相关问题