Показать Меню
falbar Отслеживаем активность пользователя

Отслеживаем активность пользователя на странице

Отслеживаем активность пользователя

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

Живет ifvisible на serkanyersen.github.io/ifvisible.js. С примером её использования Вы можете ознакомиться в материалах «демо». Там Вы увидите, как страница будет реагировать на пользователя, находящегося в неактивном состоянии. Если Вы перейдёте на другую вкладку, свернёте или просто не будете двигать мышью, то через 30 секунд окно изменит прозрачность. Все ваши действия на этой странице отпишутся в логах, которые там же Вы сможете и увидеть.

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

if(ifvisible.now()){
	// Делаем что-то
}

Если Ваш пользователь решил перейти на другую вкладку, то это можно отследить, используя следующий код:

ifvisible.on("blur", function(){
	// Ушел со страницы
	// Делаем что-то
});

ifvisible.on("focus", function(){
	// Вернулся
	// Делаем что-то
});

Когда пользователь стал неактивен на странице, то это можно отследить таким образам:

ifvisible.on("idle", function(){
	// Пользователь не активен
	// Делаем что-то
});

ifvisible.on("wakeup", function(){
	// Проснулся
	// Делаем что-то
});

Задержка перехода в ждущий режим составляет по умолчанию 60 секунд. Это время можно изменить:

ifvisible.setIdleDuration(10);

Также всеми событиями можно управлять отдельно:

// Переведет страницу в ждущий режим
ifvisible.idle();

ifvisible.idle(function(){
	// Этот код заработает, 
	// когда страница перейдет в ждущий режим
});

// Другие методы
ifvisible.blur();
ifvisible.focus();
ifvisible.idle();
ifvisible.wakeup();

При помощи библиотеки Вы можете установить свои интервалы, если пользователь перешел в неактивное состояние:

// Если страница активна, эта функция будет выполняться каждые полсекунды.
ifvisible.onEvery(0.5, function(){
	// Анимировать «лого» только,
	// когда страница активна
	animateLogo();
});

Как видите довольно полезная библиотека и удобная, а на этом у меня всё.

Спасибо за внимание.

Источник
serkanyersen.github.io/ifvisible.js

Подписаться на обновления

Комментариев еще не оставлено