Повторное использование clearInterval и clearTimeout не работает

Этот наполовину построенный код JS мне передали на работе. Цель состоит в том, чтобы вывести неактивных пользователей из системы или дать им возможность оставаться в системе.

Это может быть очевидной ошибкой. Я пытаюсь учиться (и произвести впечатление на свою работу). Но я тут бьюсь головой об стенку и не вижу проблемы. Иногда дополнительная пара глаз видит то, что мы не можем. Верно?

Шаги: сначала открывается модальное окно с предупреждением, если активность не обнаружена. Модальное окно запускает таймер, после завершения которого пользователь выходит из системы.

Если пользователь нажимает кнопку «Оставаться в системе», которая находится в модальном окне, процесс сбрасывается.

Если пользователь не нажимает кнопку «Оставаться в системе», он выходит из системы.

Все работает. Первый раз. РЖУ НЕ МОГУ!!

Проблемы: Если пользователь продолжает нажимать, чтобы оставаться в системе, возникают проблемы: A) Время обратного отсчета, отображаемое в модальном режиме, мигает двумя разными числами. B) Часы обратного отсчета не учитывают правильную продолжительность, пока функция не будет выполнена.

Почему clearTimeout и clearInterval не работают? Что мне не хватает?

Вот CodePen моего кода (с HTML и CSS)

$(document).ready(function(){
    var warningTimeout = 9800;
    var timoutNow = 10000;
  console.log(`${warningTimeout} warningTimeout | ${timoutNow} timoutNow |`);


    var warningTimerID,timeoutTimerID, countDownFunction;

    function startTimer() {
        warningTimerID = window.setTimeout(warningInactive, warningTimeout);
    }



    function countDownToLogOut() {
        let countDownSeconds = timoutNow / 1000
        let timerVisualDisplay = $("#session-logout-time")
        function displayCountdown() {
            if (countDownSeconds === 0){ 
                IdleTimeout()
            }
            console.log(`${countDownSeconds}|countDownSeconds`);

            timerVisualDisplay.text(`${countDownSeconds--} seconds`)
        }

        countDownFunction = window.setInterval(displayCountdown
        ,1000)
    }

    function warningInactive() {
        window.clearTimeout(warningTimerID);
        $('#session-logout-modal').show();
        countDownToLogOut();
    }

    function resetTimer() {
        if($('#session-logout-modal').css('display') == 'none'){
            window.clearTimeout(timeoutTimerID);
            window.clearTimeout(warningTimerID);
        }
        startTimer();
    }

    // Logout the user.
    function IdleTimeout() {
        console.log("you are logged out")
    }

    function setupTimers () {
        document.addEventListener("mousemove", resetTimer, false);
        document.addEventListener("mousedown", resetTimer, false);
        document.addEventListener("keypress", resetTimer, false);
        document.addEventListener("touchmove", resetTimer, false);
        document.addEventListener("onscroll", resetTimer, false);
        startTimer();
    }

    $(document).on('click','#btnStayLoggedIn',function(){
        $('#session-logout-modal').hide();
        window.clearInterval(countDownFunction);
        $("#session-logout-time").text('calculating...')
        resetTimer();
    });

    setupTimers();

});

Я прочитал и попробовал эти три страницы. И даже если они мне помогли, я хочу быть лучшим разработчиком, чтобы понять, что пошло не так с этим кодом. Некоторые страницы, которые я прочитал:

Первая статья

вторая статья

Третья статья

Заранее спасибо!


javascript setinterval clearinterval settimeout cleartimeout
person davidhartman00    schedule 23.03.2020    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Ваша проблема здесь, похоже, в том, что вы не очищаете старые таймеры перед запуском новых. Я бы предложил следующее просто быть в безопасности:

function startTimer() {
  // window.setTimeout returns an Id that can be used to start and stop a timer
  if (warningTimerID) {
    window.clearTimeout(warningInactive);
  }
  warningTimerID = window.setTimeout(warningInactive, warningTimeout);
}

а затем для вашей функции countDownToLogOut() добавьте это перед вызовом setInterval countDownFunction:

if (countDownFunction){
  window.clearInterval(countDownFunction)
}
person Pedro Pessoa    schedule 23.03.2020
comment
window.clearTimeout(warningInactive), вероятно, должно быть window.clearTimeout(warningTimerID), и, чтобы быть последовательным, я думаю, что countDownFunction следует называть countDownID. ;-) - person RobG; 24.03.2020