Question

我正在尝试在具有倒数计时器的页面上经过x秒后执行简单的重定向。每次我调用该函数时，我都希望重置计时器，但是，当我第二次或第三次调用它时，计时器似乎有3种不同的倒数计时。谁能看到这为什么？

function delayRedirect(){
  document.getElementById('countDown').innerHTML = 'Session Timeout In: <span id="countTimer"></span> seconds....';
  clearInterval(sessionTimer);
  var sessionTimer = null;
  var timeleft = 60;
  var sessionTimer = setInterval(function(){
     timeleft--;
     document.getElementById('countTimer').innerHTML = timeleft;
     if(timeleft <= 0)
         clearInterval(sessionTimer);
         returnToLogin();
     },1000);
}

Answer 1

全局放置sessionTimer。当前执行的操作是每次输入delayRedirect时都重新声明sessionTimer。

工作示例：

const but = document.getElementById("but");
but.addEventListener("click", delayRedirect);

//define it globally
var sessionTimer = -1;

function delayRedirect() {
  //clear it if it previously exists
  clearInterval(sessionTimer);
  sessionTimer = setInterval(function() {
    console.log("sessionTimer " + sessionTimer);
  }, 1000);
}

<button id="but">Run</button>

Answer 2

我认为所有答案都只针对Y部分，而不针对X部分，因为这显然是XY问题。解决方案是使用不是函数局部变量的变量，而解决实际问题则不需要清除任何内容。只需使用一个时间间隔来滴答，然后重置计数以延迟重定向：

get_user_join_date

var timeleft = 60;

setInterval(function() {
  if (--timeleft === 0) returnToLogin();
  countTimer.innerHTML = timeleft;
}, 1000);

delay.onclick = function() {
  timeleft = 60;
}

function returnToLogin() {
  console.log("returning to login");
}

Javascript clearInterval没有效果吗？

2 个答案: