我正在尝试在具有倒数计时器的页面上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);
}

最佳答案

将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>

10-07 13:32