Как определить время простоя в JavaScript?
Добавить в избранное
Время простоя — это время, в течение которого пользователь не взаимодействует с веб-страницей. Это взаимодействие может заключаться в перемещении мыши, щелчке по странице или использовании клавиатуры. Это время может быть определено для выполнения определенных событий, которые могут потребоваться после определенного периода простоя.
Способ 1. Использование JavaScript. Для реализации создаются две функции: одна — функция, которая сбрасывает таймер всякий раз, когда обнаруживается взаимодействие с пользователем, а другая — функция, которая будет выполняться периодически, пока пользователь бездействует. Функция сброса состоит из функции setInterval() , которая используется для создания нового интервала, который будет многократно вызывать другую функцию. Созданный таймер назначается переменной, которая будет использоваться для очистки старого таймера всякий раз, когда эта функция вызывается снова при взаимодействии с пользователем.
Эта функция вызывается путем привязки ее к событиям, вызывающим взаимодействие со страницей. К ним относятся такие методы, как onload, onmousemove, onmousedown, ontouchstart, onclick и onkeypress.
Другая функция, которая будет вызываться, когда пользователь бездействует, может использоваться для отслеживания времени и выполнения действий, когда пользователь неактивен в течение длительного времени. Примером этого может быть выход пользователя из системы, когда он неактивен более указанного времени.
Пример:
<html>
<head>
<title>How to detect idle time in JavaScript?</title>
</head>
<body>
<h1 style="color:green">
mirjs</h1>
<b>Как определить время простоя в JavaScript элегантно?</b>
<p>
Таймер будет увеличиваться каждые секунды для обозначения времени простоя.
Взаимодействие с мышью или
клавиатура сбросит и скроет таймер.
</p>
<p class="timertext" style="font-size: 1.5rem;">
Вы бездействуете
<span class="secs"></span> секунд.
</p>
<script type="text/javascript">
let timer, currSeconds = 0;
function resetTimer() {
/* Скрыть текст таймера */
document.querySelector(".timertext").style.display = 'none';
/* Очистить предыдущий интервал */
clearInterval(timer);
/* Сбросить секунды таймера */
currSeconds = 0;
/* Установить новый интервал */
timer = setInterval(startIdleTimer, 1000);
}
// Определите события, который
// сбросил бы таймер
window.onload = resetTimer;
window.onmousemove = resetTimer;
window.onmousedown = resetTimer;
window.ontouchstart = resetTimer;
window.onclick = resetTimer;
window.onkeypress = resetTimer;
function startIdleTimer() {
/* Увеличить секунды таймера */
currSeconds++;
/* Установите текст таймера на новое значение */
document.querySelector(".secs").textContent = currSeconds;
/* Показать текст таймера */
document.querySelector(".timertext").style.display = 'block';
}
</script>
</body>
</html>
Метод 2: использование jQuery: он аналогичен описанному выше методу, однако здесь новый таймер не создается каждый раз, когда обнаруживается взаимодействие с пользователем. Вместо этого рабочий таймер сбрасывается на 0 всякий раз, когда обнаруживается взаимодействие с пользователем. Для реализации создаются две функции: одна — это функция, которая сбрасывает таймер на 0 всякий раз, когда обнаруживается взаимодействие с пользователем, а другая — это функция, которая будет выполняться периодически, пока пользователь бездействует.
Определена новая переменная, которая будет глобально представлять текущее время таймера простоя.
Используя событие document.ready(), создается таймер с функцией setInterval() , который повторно вызывает другую функцию, которая обрабатывает то, что произойдет, когда пользователь бездействует в течение заданного времени. Функция сброса состоит из простого оператора, который изменит значение переменной таймера на 0, эффективно сбрасывая текущее время простоя. Эта функция вызывается путем привязки ее к событиям, вызывающим взаимодействие со страницей. К ним относятся такие методы, как onload, onmousemove, onmousedown, ontouchstart, onclick и onkeypress.
Пример:
<html>
<head>
<title>How to detect idle time in JavaScript?</title>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
</head>
<body>
<h1 style="color: green">mirjs</h1>
<b>Как определить время простоя в JavaScript элегантно?</b>
<p>
Таймер будет увеличиваться каждые
секунды для обозначения времени простоя.
Взаимодействие с мышью или клавиатурой
сбросит и скроет таймер.
</p>
<p class="timertext" style="font-size: 1.5rem;">
Вы бездействуете
<span class="secs"></span> секунд.
</p>
<script type="text/javascript">
var currSeconds = 0;
$(document).ready(function() {
/* Увеличивайте счетчик времени простоя каждую секунду */
let idleInterval = setInterval(timerIncrement, 1000);
/* Обнуление таймера простоя при движении мыши */
$(this).mousemove(resetTimer);
$(this).keypress(resetTimer);
});
function resetTimer() {
/* Скрыть текст таймера */
document.querySelector(".timertext").style.display = 'none';
currSeconds = 0;
}
function timerIncrement() {
currSeconds = currSeconds + 1;
/* Установите текст таймера на новое значение */
document.querySelector(".secs").textContent = currSeconds;
/* Показать текст таймера */
document.querySelector(".timertext").style.display = 'block';
}
</script>
</body>
</html>
Вы можете посмотреть или скачать пример.