Example

Question

我编写了一个脚本，用于检查用户是否在页面上处于活动状态，如果没有在15分钟后显示弹出窗口，此时显示的计时器从60秒开始倒计时，然后重定向用户到杀死网站上用户会话的页面。

然而，虽然我可以重置显示弹出窗口的计时器，但我似乎无法取消从60倒计时的第二个计时器。

这是我的代码：

    <script type="text/javascript">
        idleTime = 0;
        idleRedirect = 0;
        // Count for the timer
        var wsCount = 60;

        // Start Countdown
        function startCountdown() {
            if((wsCount - 1) >= 0){
                wsCount = wsCount - 1;
                // Display countdown
                $("#countdown").html('<span id="timecount">' + wsCount + '</span>.');
                timing = setTimeout(startCountdown, 60000);
            }              
            else{
                // Redirect to session kill
                alert('Goodbye');
            }
        }

        // Pop up when the timer hits 15 minutes
        function timerIncrement() {
            idleTime = idleTime + 1;
            if (idleTime > 14) { // 15 minutes
                $('#inactiveWarning').modal('show');
                startCountdown();
            }
        }

        $(document).ready(function () {
            //Increment the idle time counter every minute.
            var idleInterval = setInterval("timerIncrement()", 5000); // 1 minute

            //Zero the idle timer on mouse movement.
            $(this).mousemove(function (e) {
                idleTime = 0;
                idleRedirect = 0;
                startCountdown.die();
            });
            $(this).keypress(function (e) {
                idleTime = 0;
                idleRedirect = 0;
                startCountdown.die();
            });
            $(this).scroll(function (e) {
                idleTime = 0;
                idleRedirect = 0;
                startCountdown.die();
            });
        })

    </script>

编辑似乎对如何取消计时器感到困惑。道歉。

基本上，有代码可以查找键盘输入，鼠标移动或鼠标滚动。当其中一个条件被激活时，我希望有时间被杀死。

Answer 1

我总是做这样的事情：

    isDead = false;

    function startCountdown() {
        if(isDead) {
            return;
        }
        if((wsCount - 1) >= 0){
            wsCount = wsCount - 1;
            // Display countdown
            $("#countdown").html('<span id="timecount">' + wsCount + '</span>.');
            timing = setTimeout(startCountdown, 1000);
        }              
        else{
            // Redirect to session kill
            alert('Goodbye');
        }
    }

现在你可以通过将isDead设置为true来“杀死”它。

另外：你的代码有可怕的倾向：

        function revive() {
            idleTime = 0;
            idleRedirect = 0;
            //startCountdown.die();
            isDead = true;
        }

        $(this).mousemove(revive).keypress(revive).scroll(revive);

Answer 2

我强烈建议您查看jQuery的doTimeout插件：http://benalman.com/projects/jquery-dotimeout-plugin/

它可以让你在4-5行中完成。

Answer 3

重写您的startCountdown功能：

    // Start Countdown
    function startCountdown() {
        if (timing != null) { return; }

        if((wsCount - 1) >= 0){
            wsCount = wsCount - 1;
            // Display countdown
            $("#countdown").html('<span id="timecount">' + wsCount + '</span>.');
            timing = setInterval(startCountdown, 1000);
        }              
        else{
            // Redirect to session kill
            clearInterval(timing);
            timing = null;
            alert('Goodbye');
        }
    }

Answer 4

尝试拨打clearTimeout()，如下所示：

<script type="text/javascript">
    idleTime = 0;
    idleRedirect = 0;
    // Count for the timer
    var wsCount = 60;
    var timing;

    // Start Countdown
    function startCountdown() {
        if((wsCount - 1) >= 0){
            wsCount = wsCount - 1;
            // Display countdown
            $("#countdown").html('<span id="timecount">' + wsCount + '</span>.');
            timing = setTimeout(startCountdown, 1000);
        }              
        else{
            // Redirect to session kill
            clearTimeout(timing);
            alert('Goodbye');
        }
    }
</script>

Answer 5

我发现很难理解你的代码在做什么，但是由于startCountdown()中多次调用timerIncrement()，看起来你的第二个计时器运行量很大。 / p>

尝试利用setTimeout和setInterval的实际工作方式：

$(function() {

   var idleTimer = null;
   var logoutCount = null;

   function startLogoutTimer() {
      var wsCount = 60;
      logoutCount = setInterval(function() {
         wsCount--;
         $("#countdown").html('<span id="timecount">' + wsCount + '</span>.');
         if (wsCount == 0) {
            // Perform redirect here
         }
      }, 1000)
   }

   function resetTimers() {
      clearTimeout(idleTimer);
      clearInterval(logoutCount);
      $("#countdown").html('');
      timer1 = setTimeout(startLogoutTimer, 1000 * 60 * 15);
   }

   $(this).mousemove(resetTimers);
   $(this).keypress(resetTimers);
   $(this).scroll(resetTimers);
   resetTimers();

});

Answer 6

既然你想看看如何在没有doTimeout的情况下完成它，我会做这样的事情：

var idleTime = 0;
var idleTimeFrequency = 50;
var maxIdleTime = 60000;

function checkIdleTime() {
    idleTime += idleTimeFrequency;

    if (idleTime > maxIdleTime) {
        alert('time up!');
        // note that checkIdleTime() won't be called again 
    } else {
        setTimeout(checkIdleTime, idleTimeFrequency); // check again in 50 milliseconds
    }
}

function resetIdleTime() {
    idleTime = 0;
}

$(document).mousemove(resetIdleTime);
$(document).keypress(resetIdleTime);
$(document).scroll(resetIdleTime);
$(document).click(resetIdleTime);

setTimeout(checkIdleTime, idleTimeFrequency); // call once to get the loop started

Answer 7

如果你使用的是jQuery 1.7或更高版本，你可以使用.on轻松缩短它，对于较小的版本，使用.live。

只需使用以下内容即可，您应该遇到0个问题。享受！

Example

var idleActivity = 0, idleRedirect = 0, tmrCountDownActivity, tmrCountDownRedirect;
function activity(e) { // e.type will = 'keypress' || 'mousemove' || scroll
    clearInterval(tmrCountDownActivity);
    idleActivity = 0;
    tmrCountDownActivity = setInterval(countDownActivity, 60000);
}
function countDownActivity() {
    if (idleActivity >= 60) {
        //$('#inactiveWarning').modal('show');
        clearInterval(tmrCountDownActivity);
        idleActivity = 0;
        idleRedirect = 0;
        tmrCountDownActivity = setInterval(countDownRedirect, 60000);
    }
    else {
        clearInterval(tmrCountDownRedirect);
        idleActivity++;
    }
}
function countDownRedirect() {
    if (idleRedirect >= 15) {
        clearInterval(tmrCountDownRedirect);
        alert('Goodbye');
        window.location = '/';
    }
    else {
        $("#countdown").html('<span id="timecount">' + (idleRedirect+1) + '</span>.');
        idleRedirect++;
    }
}

$(function() {
    $("#dialog").dialog({ autoOpen: false });

    $(this).on('keypress mousemove scroll', activity);
    tmrCountDownActivity = setInterval(countDownActivity, 60000);

})

如何在JQuery函数运行时终止它

7 个答案:

Example