2017-02-19 25 views
0

Я создаю тайм-аут сеанса как часть веб-приложения, используя библиотеку MomentJS. То, что у меня до сих пор (ниже), - это разница timeToExpire (в секундах) от того, когда пользователь вошел в систему и когда истечет срок действия сеанса. Однако при отображении обратного отсчета с использованием setIntervaldiffNOT пересчитывается каждую секунду, и вместо этого часы никогда не обновляются.MomentJS обратный отсчет с 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>

+0

Есть очень простые таймеры обратного отсчета, например [* Простейший возможный таймер обратного отсчета времени JavaScript? *] (Http://stackoverflow.com/questions/20618355/the-simplest-possible-javascript-countdown-timer). Обратите внимание, что * setInterval * не запускается с точно указанной задержкой, поэтому ваши часы будут медленно дрейфовать и время от времени пропускать секунду. – RobG

ответ

2

Вы не обновляя значения сейчас() или 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)}`) 
} 
+0

Спасибо за информацию – MindVox