Определение и использование простоя в JavaScript

Быстрый ответ

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

let idleTimer;
const resetIdleTimer = () => {
  clearTimeout(idleTimer);  // отменяем предыдущий таймер
  idleTimer = setTimeout(() => console.log('Пользователь отсутствует'), 5000); // запускаем отсчёт на 5 секунд
};
['mousemove', 'keypress'].forEach(event => document.addEventListener(event, resetIdleTimer)); // регистрируем события движения мыши и нажатия клавиш
resetIdleTimer(); // запускаем процесс обновления таймера

Таймер обратного отсчёта на 5 секунд является активным при любой активности со стороны пользователя. Если пользователь решает сделать перерыв, по истечении указанного времени setTimeout активируется и оповещает о его бездействии. Мы отслеживаем любые движения мышью или нажатия клавиш.

Возможности использования периодов бездействия

Определение периодов бездействия позволяет повысить значение времени, когда пользователь не проявляет активности, превращая его в полезный ресурс. Это может способствовать повышению пользовательского опыта и обеспечивать стабильную работу служб. Предлагаем несколько стратегий использования времени бездействия:

1. Подгрузка контента: Загружаем значимые данные для пользователя во время его неактивности, обеспечивая таким образом бесперебойную работу приложения при его возвращении.

2. Мониторинг загрузки страниц: Инициируем таймер бездействия при каждой загрузке страницы для получения точных данных об активности пользователя.

3. Расширенное отслеживание событий: Следим за такими действиями пользователя, как scroll и click, в дополнение к mousemove и keypress.

4. Управление ресурсоемкими задачами: Используем периоды бездействия для выполнения трудоемких процессов, оптимизируя таким образом использование CPU.

5. Использование внешних библиотек: В случае невозможности разработки собственного решения, 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) вы имеете возможность оценить, насколько важна ваша вкладка для пользователя. Именно от этого зависит ваша стратегия взаимодействия.

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

Полезные материалы

1. Page Visibility API – Web APIs | MDN — источник знаний MDN для работы с определением видимости страниц в JavaScript.
2. JavaScript Timing Events — основы использования setTimeout и setInterval для отслеживания бездействия.
3. Планирование: setTimeout и setInterval — глубокие разборы работы таймерных событий в JavaScript.
4. Обнаружение неактивных пользователей | CSS-Tricks — практические примеры работы с бездействующими пользователями.
5. GitHub – soixantecircuits/idle-js — готовая для использования библиотека для обнаружения бездействия пользователей.
6. Использование Page Visibility API | web.dev — все преимущества Page Visibility API собраны в одном месте.
7. Idle Detection API — дополнительные возможности для API обнаружения бездействия от W3C.