Как определить время бездействия в JavaScript

Вот простой скрипт, использующий jQuery, который обрабатывает события перемещения мыши и нажатия клавиш. Если время неактивности истекает, страница перезагрузится.

<script type="text/javascript">
    var idleTime = 0;
    $(document).ready(function () {
        // Увеличиваем счетчик времени неактивности каждую минуту.
        var idleInterval = setInterval(timerIncrement, 60000); // 1 минута

        // Сбрасываем таймер неактивности при движении мыши.
        $(this).mousemove(function (e) {
            idleTime = 0;
        });
        $(this).keypress(function (e) {
            idleTime = 0;
        });
    });

    function timerIncrement() {
        idleTime = idleTime + 1;
        if (idleTime > 19) { // 20 минут
            window.location.reload();
        }
    }
</script>

Скрипт работает следующим образом: он инициирует счетчик времени неактивности, который увеличивается каждую минуту. Когда пользователь перемещает мышь или нажимает клавиши, таймер сбрасывается. Если время неактивности превышает 20 минут, страница автоматически перезагрузится. Это может быть полезно для поддержания актуальности данных на странице или для перезапуска сессии.

Я создал небольшую библиотеку, которая делает следующее:

Idle.js на GitHub

Описание:

Крошечная JavaScript библиотека для отслеживания активности пользователя в браузере (неактивный, в режиме ожидания, не смотрит на веб-страницу, в другой вкладке и т.д.). Библиотека независима от любых других JavaScript библиотек, таких как jQuery.

Пользователи Visual Studio могут установить её через NuGet, выполнив команду:

Install-Package Idle.js

Если вам нужна помощь с интеграцией или есть вопросы по использованию, не стесняйтесь задавать!

Все предыдущие ответы содержат всегда активный обработчик события mousemove. Если вы используете jQuery, дополнительная обработка, которую он выполняет, может накопиться. Особенно это критично, если у пользователя игровая мышь, так как может происходить до 500 событий в секунду.

Данное решение избегает обработки каждого события mousemove. Это приводит к небольшим временным погрешностям, но вы можете настроить их под свои нужды.

Вот пример реализации:

function setIdleTimeout(millis, onIdle, onUnidle) {
    var timeout = 0;
    startTimer();

    function startTimer() {
        timeout = setTimeout(onExpires, millis);
        document.addEventListener("mousemove", onActivity);
        document.addEventListener("keydown", onActivity);
        document.addEventListener("touchstart", onActivity);
    }
    
    function onExpires() {
        timeout = 0;
        onIdle();
    }

    function onActivity() {
        if (timeout) clearTimeout(timeout);
        else onUnidle();
        // поскольку мышь двигается, отключаем наши обработчики событий на 1 секунду
        document.removeEventListener("mousemove", onActivity);
        document.removeEventListener("keydown", onActivity);
        document.removeEventListener("touchstart", onActivity);
        setTimeout(startTimer, 1000);
    }
}

Эта реализация позволит вам минимизировать количество обработок событий, тем самым снижая нагрузку на производительность. Вы можете адаптировать этот код под свои нужды.

Вы, вероятно, сможете сделать что-то похожее, отслеживая движение мыши в области формы и обновляя глобальную переменную с временем последнего движения. Затем вам нужно будет запустить интервал, который периодически будет проверять время последнего движения и выполнять какое-то действие, если с тех пор прошло достаточно времени без обнаружения движения мыши.

Попробуйте этот код. Он работает отлично.

var IDLE_TIMEOUT = 10; //секунд
var _idleSecondsCounter = 0;

document.onclick = function () {
    _idleSecondsCounter = 0;
};

document.onmousemove = function () {
    _idleSecondsCounter = 0;
};

document.onkeypress = function () {
    _idleSecondsCounter = 0;
};

window.setInterval(CheckIdleTime, 1000);

function CheckIdleTime() {
    _idleSecondsCounter++;
    var oPanel = document.getElementById("SecondsUntilExpire");
    if (oPanel) {
        oPanel.innerHTML = (IDLE_TIMEOUT - _idleSecondsCounter) + "";
    }
    if (_idleSecondsCounter >= IDLE_TIMEOUT) {
        alert("Время истекло!");
        document.location.href = "SessionExpired.aspx";
    }
}

Этот код отслеживает, является ли пользователь активным, и после 10-секундного простоя отображает предупреждение и перенаправляет на страницу с сообщением об истечении сессии. Не забудьте добавить элемент с ID SecondsUntilExpire в ваш HTML, чтобы код работал корректно.