Реклама
timeweb
falbar

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

30 ноября 2014 1761 0

Сегодня мы рассмотрим способ определения активности пользователя на странице, и в этом нам поможет JavaScript библиотека ifvisible.

Реклама

Живет ifvisible на github. С примером её использования вы можете ознакомиться в материалах «демо». Там вы увидите, как страница будет реагировать на пользователя, находящегося в неактивном состоянии. Если вы перейдёте на другую вкладку, свернёте или просто не будете двигать мышью, то через 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();
});

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

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