javascript - MomentJS 倒计时与 diff

Question

我正在使用 MomentJS 库构建 session 超时作为 Web 应用程序的一部分。到目前为止(如下)，我所掌握的是用户登录时和 session 到期时的 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

您没有更新 now() 或 timeToExpire 值，因此您传递给 displayClock 的值始终相同。

完整 JS Fiddle 的链接: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)}`)
}