Javascript clearInterval не имеет эффекта?

Я пытаюсь сделать простое перенаправление через 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);
}

javascript
person AKAust    schedule 09.10.2018    source источник
comment
Ну, вы создаете setInterval каждый раз, когда вызываете функцию delayRedirect. Попробуйте установить это вне функции.   -  person Cata John    schedule 09.10.2018
comment
У вас там два var sessionTimer = .... var используется только для объявления переменной.   -  person Chris G    schedule 09.10.2018
comment
Это потому, что я пытаюсь очистить предыдущую перед повторным запуском.   -  person AKAust    schedule 09.10.2018
comment
sessionTimer — локальная переменная в этой функции. Каждый раз, когда вы вызываете delayRedirect, значение sessionTimer равно null. Вам нужна глобальная переменная (или, по крайней мере, внешняя область), чтобы сохранить идентификатор sessionTimer между вызовами.   -  person Frax    schedule 09.10.2018
comment
Вам нужно объявить sessionTimer один раз вне функции.   -  person Chris G    schedule 09.10.2018
comment
@AKAust Редактировать вопрос с помощью решения, которое работает, - это нонсенс.   -  person Chris G    schedule 09.10.2018
comment
ОК поставлю до и после, извините!   -  person AKAust    schedule 09.10.2018
comment
@AKAust Просто оставьте все как есть; после уже ниже, в виде ответов.   -  person Chris G    schedule 09.10.2018
comment
ОК оставлю как есть :)   -  person AKAust    schedule 09.10.2018

Ответы (2)


arrow_upward
1
arrow_downward

Поместите sessionTimer глобально. В настоящее время вы повторно объявляете sessionTimer каждый раз, когда вводите delayRedirect.

Рабочий пример:

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>

person kemicofa ghost    schedule 09.10.2018
comment
Привет, спасибо за это, я только что объявил переменную вне функции, и это сработало. обновили мой код, который теперь работает нормально! - person AKAust; 09.10.2018

arrow_upward
1
arrow_downward

Я чувствую, что все ответы касаются только части Y, а не части X, учитывая, что это явно проблема XY. Хотя решение состоит в том, чтобы использовать переменную, которая не является локальной для функции, решение фактической проблемы не требует очистки чего-либо. Можно просто использовать интервал для галочки и сбросить счетчик, чтобы отложить перенаправление:

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");
}
<p>Session Timeout In: <span id="countTimer">60</span> seconds....</p>
<button id="delay">Delay</button>

person Chris G    schedule 09.10.2018
comment
Спасибо за ваш ответ, я уже принял другой, но это хороший способ сделать это! - person AKAust; 09.10.2018