从函数外部清除当前间隔

Question

我正在尝试设置一个在页面加载时开始并每秒运行的计时器，我有该部分工作。

当您剩下不到 5 分钟时，会弹出一个模式，告诉您您的会话将在 5 分钟后过期，我也有这部分工作。

我正在努力解决的部分是，当您关闭模态时，它意味着停止间隔，然后重新启动它。我能够让它开始/停止间隔，但我无法让它同时执行这两项操作。

我是JS的新手，所以任何帮助不胜感激

$(document).ready(function() {
restartCountdown();
timeRemaining = 1 * 60 * 1000;
function restartCountdown() {
countdown = setInterval(function() {
startCountdown();
timeRemaining -= 1000;
}, 1000);
}
$(".closeModal").on('click', function() {
//clear countdown
clearInterval(countdown);
//restart countdown
restartCountdown();
});
});
function startCountdown() {
const qtyInputs = document.querySelectorAll('input[name="qty"]');
const minutesToUpdate = document.getElementById('minsLeft');
//let countdown = setInterval( () =>{            
let min = Math.floor(timeRemaining / (60 * 1000));
let sec = Math.floor((timeRemaining - (min * 60 * 1000)) / 1000);
console.log("min left: " + min + " seconds left: " + sec);
qtyInputs.forEach(function(qtyInput) {
qtyInput.addEventListener('change', () => {
clearInterval(countdown);
console.log("interval has been cleared");
});
});
if (min <= 5 && sec <= 0) {
$('#sessionModal').modal('show');
}
if (timeRemaining == 0) {
//clearInterval(countdown);
window.location.reload();
console.log("page will refresh");
$('#sessionModal').modal('hide');
}
if (sec < 10) {
secondsLeft = "0" + sec;
} else {
secondsLeft = sec;
}
minutesToUpdate.innerHTML = '0' + min + ':' + secondsLeft + '';
//}, 1000)
}

Answer 1

似乎问题在于您在调用timeRemaining时没有将restartCountdown的值设置为其初始值。

当您单击关闭模式按钮时，您将清除countdown的间隔并调用restartCountdown以便您的间隔再次开始。

但您正在跟踪timeRemaining中的剩余时间(从 1 * 60 * 1000 开始(。每次调用间隔回调时，此变量都会减少 1000 毫秒。

因此，当您要重新启动倒计时时，必须将其再次设置为其初始值，以便剩余时间从其最高值开始。