Повторное использование clearInterval и clearTimeout не работает - PullRequest
Новая
       57

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

1 голос
/ 24 марта 2020

Мне передали эту половину встроенного JS кода на моей работе. Цель - вывести неактивных пользователей из системы или дать им возможность оставаться в системе.

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

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

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

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

Все работает. Первый раз. LOL !!!! Б) Часы обратного отсчета не учитывают правильную продолжительность, пока не выполнится функция.

Почему 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();

});

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

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

Вторая статья

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

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

1 Ответ

0 голосов
/ 24 марта 2020

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

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 () добавьте это перед вызовом функции countDownFunction setInterval: 

if (countDownFunction){
  window.clearInterval(countDownFunction)
}
...