使用系统时钟进行准确的空闲超时警告

Question

I am working on a modal which will alert users of a pending logout due to idle time. Overall it works, but I notice the timer is not 100% accurate. I know there are issues with setInterval and accuracy. I still seeing discrepancies and will welcome a suggestion on how to improve my code.

var sessionTimeoutPeriod = 240;
var state = "L";
var timeoutPeriod = sessionTimeoutPeriod * 1000;
var logout = Math.floor(timeoutPeriod / 60000);
var idleInterval;

if (state == "L" || state == "O" || state == "C") {
var idleTime = 0;

$(document).ready(function() {
    //Zero the idle timer on mouse movement.
    $(this).mousemove(function(e) {
        idleTime = 0;
        console.log("The mouse moved, idle time = " + idleTime);
    });
    $(this).keypress(function(e) {
        idleTime = 0;
        console.log("A key was pressed, idle time = " + idleTime);
    });


    idleInterval = setInterval(timerIncrement, 60000); // 1 minute

});

function timerIncrement() {

  idleTime++;
    console.log("The total idle time is "+idleTime+  " minutes.");

    if (idleTime >= 1) {
    console.log("The modal will fire if idle time = " +idleTime);
        var modal = new window.AccessibleModal({
        mainPage: $('#main'),
            overlay: $('#overlay').css('display', 'block'),
            modal: $('#modal-session-timeout'),
            prevFocus: $('#main')
        });

         modal.show();

         $('#modal-overlay').removeClass('opened');

        $('.js-timeout-refresh, .xClose').click(function() {
            modal.hide();
            $('#overlayTY').css('display', 'none');
            idleTime = 0;

            console.log("The total idle time is "+idleTime+  " minutes.");
        });
        $('.js-timeout-session-end').click(function() {
            modal.hide();
            $('#overlay').css('display', 'none');
            endSession();
        });
        console.log(idleTime);
    }
    if (idleTime == logout) { // 9 minutes
        endSession();
    }

    var endSession = function() {
        document.location.replace(logoutPageUrl);
    };
}

}

Answer 1

Instead of relying on the interval to determine how much time has passed, you could validate how much time has passed manually by comparing the current time against the time since last activity.

This way you can increase the checking interval without having to modify the code. The discrepancy will never be higher then then the interval timeout now, the discrepancy will also not change incrementally, it will always be lower or equal to the interval ( in worst case scenario ).

Here is a basic example.

var sessionTimeoutPeriod = 240;
var timeoutPeriod = sessionTimeoutPeriod * 1000;
var oneMinute = 60000;
var showIdlePopUpTimeOut = oneMinute * 2;
var lastActivity = new Date();

function getIdleTime() {
    return new Date().getTime() - lastActivity.getTime();
}

$(document).ready(function () {
    //Zero the idle timer on mouse movement.
    $(this).mousemove(function (e) {
        console.log("The mouse moved, idle time = " + getIdleTime());
        lastActivity = new Date();
    });
    $(this).keypress(function (e) {
        console.log("A key was pressed, idle time = " + getIdleTime());
        lastActivity = new Date();
    });

    setInterval(checkIdleTime, 5000);
});

function endSession() {
    document.location.replace(logoutPageUrl);
};

function checkIdleTime() {
    var idleTime = getIdleTime();
    console.log("The total idle time is " + idleTime / oneMinute + " minutes.");

    if (idleTime > showIdlePopUpTimeOut) {
        var modal = new window.AccessibleModal({
            mainPage: $('#main'),
            overlay: $('#overlay').css('display', 'block'),
            modal: $('#modal-session-timeout'),
            prevFocus: $('#main')
        });

        modal.show();

        $('#modal-overlay').removeClass('opened');

        $('.js-timeout-refresh, .xClose').click(function () {
            modal.hide();
            $('#overlayTY').css('display', 'none');
            lastActivity = new Date();
        });
        $('.js-timeout-session-end').click(function () {
            modal.hide();
            $('#overlay').css('display', 'none');
            endSession();
        });
        console.log(lastActivity);
    }
    if (idleTime > timeoutPeriod) { // 4 minutes
        endSession();
    }

}

Answer 2

The problem is that your function "timerIncrement" checks the difference every minute after loading the page, so you will never get exact 1 minute after last activity.Changing interval from 60000 to 1000 will solve the issue.

You don't even need to calculate diff, you can just reset timeout every time there is activity. like this:

$(this).on("mousemove keypress", function(e) {
        clearInterval(idleInterval);
        idleInterval = setTimeout(functionThatExecutesAfter1minInactivity, 60000);
    });