重复使用 clearInterval 和 clearTimeout 不起作用

Question

我在工作中通过了这个半构建的 JS 代码。 objective 用于注销非活动用户或让他们选择保持登录状态。

这可能是一个明显的错误。我正在努力学习（并打动我的工作）。但是我在这里用头撞墙，看不到问题所在。有时，多出一双眼睛可以看到我们看不到的东西。对吗？

步骤：如果未检测到 activity，首先会打开一个模式并显示警告。模式启动一个计时器，完成后将用户从系统中注销。

如果用户单击模式中的 "stay logged in" 按钮，该过程将被重置。

如果用户没有点击 "stay logged in" 按钮，他们将退出系统。

一切正常。第一次。哈哈！！

问题：如果用户不断点击以保持登录系统，则存在问题： 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)
}

重复使用 clearInterval 和 clearTimeout 不起作用

Repeated use of clearInterval and clearTimeout not working

javascript

settimeout

setinterval

clearinterval

cleartimeout