Определение и использование простоя в 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.