从函数外部清除当前间隔

Question

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

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

我正在努力解决的部分是，当您关闭模式时，它意味着停止间隔然后重新启动它。我能够让它达到 start/stop 间隔，但我不能让它同时做到这两个。

我是 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

看来问题是您在调用restartCountdown时没有将timeRemaining的值设置为其初始值。

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

但是您正在跟踪 timeRemaining 中的剩余时间（从 1 * 60 * 1000 开始）。每调用一次间隔回调，该变量减少1000ms。

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

从函数外部清除当前间隔

Clear current interval from outside the function

javascript

jquery

setinterval

clearinterval