Определение и использование простоя в JavaScript
Быстрый ответ
Для того чтобы отследить периоды пользовательской неактивности, возможно использовать таймер ожидания. Вашей задачей будет обнуление этого таймера при каждом действии пользователя. Вот наш пример реализации:
let idleTimer;
const resetIdleTimer = () => {
clearTimeout(idleTimer); // отменяем предыдущий таймер
idleTimer = setTimeout(() => console.log('Пользователь отсутствует'), 5000); // запускаем отсчёт на 5 секунд
};
['mousemove', 'keypress'].forEach(event => document.addEventListener(event, resetIdleTimer)); // регистрируем события движения мыши и нажатия клавиш
resetIdleTimer(); // запускаем процесс обновления таймера
Таймер обратного отсчёта на 5 секунд является активным при любой активности со стороны пользователя. Если пользователь решает сделать перерыв, по истечении указанного времени setTimeout
активируется и оповещает о его бездействии. Мы отслеживаем любые движения мышью или нажатия клавиш.
Возможности использования периодов бездействия
Определение периодов бездействия позволяет повысить значение времени, когда пользователь не проявляет активности, превращая его в полезный ресурс. Это может способствовать повышению пользовательского опыта и обеспечивать стабильную работу служб. Предлагаем несколько стратегий использования времени бездействия:
Подгрузка контента: Загружаем значимые данные для пользователя во время его неактивности, обеспечивая таким образом бесперебойную работу приложения при его возвращении.
Мониторинг загрузки страниц: Инициируем таймер бездействия при каждой загрузке страницы для получения точных данных об активности пользователя.
Расширенное отслеживание событий: Следим за такими действиями пользователя, как
scroll
иclick
, в дополнение кmousemove
иkeypress
.Управление ресурсоемкими задачами: Используем периоды бездействия для выполнения трудоемких процессов, оптимизируя таким образом использование CPU.
Использование внешних библиотек: В случае невозможности разработки собственного решения, Idle.js придет на помощь.
window.addEventListener('scroll', resetIdleTimer, { capture: true, passive: true }); // ни одно действие скролл не пройдёт незамеченным!
Указанная выше опция фазы перехвата в addEventListener
обеспечивает продвинутый контроль пользователя.
Визуализация
Визуализируйте механизм отслеживания периодов бездействия в JavaScript как счётные палочки. Каждое действие пользователя обновляет таймер:
let lastActivity = new Date().getTime(); // время последней активности
const TIMEOUT = 5 * 60 * 1000; // если активности не было слишком долго, пора действовать!
document.onmousemove = document.onkeypress = () => {
lastActivity = new Date().getTime(); // обновляем время последней активности
silenceCounters();
};
setInterval(() => {
if (new Date().getTime() – lastActivity > TIMEOUT) {
awakenCounters(); // время бездействия превысило пороговое значение
}
}, 1000);
function awakenCounters() {
console.log('🕰️ Динь-динь! Пользователь бездействует.'); // звонок о неактивности
}
function silenceCounters() {
console.log('🕰️ Шшш... Пользователь активен.'); // уведомляем о активности
}
Усовершенствование стратегии определения бездействия
Стандартизация обработки событий
Для достижения единообразия поведения в различных браузерах можно использовать нативный JavaScript или jQuery. Важно создавать адаптивный код, который будет гибко работать с механизмами обработки событий различных браузеров.
Повышение эффективности подгруженного контента
Несмотря на заметную пользу подгрузки данных заранее, всегда стоит думать об экономии трафика! Разрабатывайте стратегию подгрузки с учётом пользовательского опыта и значимости данных.
Анализ доступности пользователя
При помощи API видимости страниц (Page Visibility API) вы имеете возможность оценить, насколько важна ваша вкладка для пользователя. Именно от этого зависит ваша стратегия взаимодействия.
В конечном итоге, определение периодов бездействия пользователя должно способствовать не только эффективному использованию ресурсов, но и усилению вовлеченности пользователя.
Полезные материалы
- Page Visibility API – Web APIs | MDN — источник знаний MDN для работы с определением видимости страниц в JavaScript.
- JavaScript Timing Events — основы использования
setTimeout
иsetInterval
для отслеживания бездействия. - Планирование: setTimeout и setInterval — глубокие разборы работы таймерных событий в JavaScript.
- Обнаружение неактивных пользователей | CSS-Tricks — практические примеры работы с бездействующими пользователями.
- GitHub – soixantecircuits/idle-js — готовая для использования библиотека для обнаружения бездействия пользователей.
- Использование Page Visibility API | web.dev — все преимущества Page Visibility API собраны в одном месте.
- Idle Detection API — дополнительные возможности для API обнаружения бездействия от W3C.