javascript - 重复使用clearInterval和clearTimeout不起作用

Question

我在工作中通过了这个半构建的 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();

});

我已经阅读并尝试了这三页。即使他们确实帮助了我，我也想成为一名更好的开发人员，以了解这段代码出了什么问题。我读过的一些页面:

FirstArticle

SecondArticle

ThirdArticle

提前致谢!

Answer 1

您的问题似乎是在开始新计时器之前没有清除旧计时器。为了安全起见，我建议执行以下操作:

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)
}