Як перевірити, активний користувач чи ні, на jаvascript.

Відео: Конкатенація (об`єднання) рядків в jаvascript. Як дізнатися довжину рядка, властивість length JS

Всім привіт! Сьогодні у нас на горизонті проста бібліотека jаvascript - ifvisible.js, що дозволяє визначити, взаємодіє користувач зі сторінкою чи ні.

Як завжди, на початку посилання на матеріал:

ifvisible.js

Завантажити вихідні ви можете також там, якшо по кнопці Download .zip.

Дана бібліотека дуже проста, легка і кросбраузерності.

Ви можете подивитися демо і зрозуміти, як вона працює. Ви побачите повзунок, який буде заповнюватися протягом 30 секунд. Як тільки ви натиснете на якусь кнопку клавіатури або Двіни мишкою, то все скинеться, і відлік піде заново. Так, якщо ви не будете взаємодіяти зі сторінкою 30 секунд, то вона "засне".

Відео: jаvascript Tutorial For Beginners - NaN (Not a Number)

Тепер про те, як її використовувати. Скачайте вихідні, підключіть скрипт.

Далі слід зробити перевірку

// Якщо зі сторінкою йде взаємодія прямо зараз 
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 секунд за замовчуванням, але ви можете змінити її

Відео: jаvascript Обробка форм form input

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() - 
}) -

Отже, це все. Як бачите, дуже проста і цікава бібліотека, думаю, багатьом стане в нагоді. Дякую за увагу і удачі!

Поділися в соціальних мережах:

Схожі