Главная->Уроки по js->Как проверить, активен пользователь или нет, на JavaScript
Как проверить, активен пользователь или нет, на JavaScript
Всем привет! Сегодня у нас на горизонте простая библиотека JavaScript - ifvisible.js, позволяющая определить, взаимодействует пользователь со страницей или нет. Как всегда, в начале ссылка на материал: ifvisible.js Скачать исходники вы можете также там, кликнув по кнопке Download .zip. Данная библиотека очень простая, легкая и кроссбраузерная. Вы можете посмотреть демо и понять, как она работает. Вы увидите ползунок, который будет заполняться в течение 30 секунд. Как только вы нажмете на какую либо кнопку клавиатуры или двините мышкой, то все сбросится, и отсчет пойдет заново. Так, если вы не будете взаимодействовать со страницей 30 секунд, то она "уснет". Теперь о том, как ее использовать. Скачайте исходники, подключите скрипт. Дальше следует сделать проверку // Если со страницей идет взаимодействие прямо сейчас if( ifvisible.now() ) { // Показать всплывающее окно openPopUp(); } Вы можете отследить, если пользователь перешел на другую вкладку или свернул браузер. ifvisible.on("blur", function() { // пример кода... animations.pause(); }); ifvisible.on("focus", function() { // возвращаем все анимации animations.resume(); }); ifvisible.js может также обрабатывать активность и неактивность на странице ifvisible.on("idle", function() { // Остановить все трансляции stream.pause(); }); ifvisible.on("wakeup", function() { // Вернуть трансляцию stream.resume(); }); Задержка перед переходом в ждущий режим 60 секунд по умолчанию, но вы можете изменить ее ifvisible.setIdleDuration(120); // Страница перейдет в ждущий режим через 120 секунд Вы можете обрабатывать события вручную ifvisible.idle(); // Переведет страницу в ждущий режим ifvisible.idle(function() { // Этот код сработает, когда страница перейдет в ждущий режим }); // Другие методы ifvisible.blur(); ifvisible.focus(); ifvisible.idle(); ifvisible.wakeup(); Вы можете задавать свои умные интервалы с ifvisible.js, если пользователь неактивен или не смотрит на страницу, интервал будет автоматически останавливаться. // Если страница активна, эта функция будет выполняться каждые полсекунды. ifvisible.onEvery(0.5, function() { // Анимировать лого только, когда страница активна animateLogo(); }); Итак, это все. Как видите, очень простая и интересная библиотека, думаю, многим пригодится. Спасибо за внимание и удачи!