Как элегантно определить простой в JavaScript?

Как элегантно определить простой в JavaScript?

Без использования jQuery, только ванильный JavaScript:

 var inactivityTime = function () { var time; window.onload = resetTimer; // DOM Events document.onmousemove = resetTimer; document.onkeypress = resetTimer; function logout() { alert("You are now logged out.") //location.href = 'logout.html' } function resetTimer() { clearTimeout(time); time = setTimeout(logout, 3000) // 1000 milliseconds = 1 second } }; 

И инициируйте функцию там, где она вам нужна (например: onPageLoad).

 window.onload = function() { inactivityTime(); } 

Вы можете добавить больше событий DOM, если вам нужно. Наиболее используемые:

 document.onload = resetTimer; document.onmousemove = resetTimer; document.onmousedown = resetTimer; // touchscreen presses document.ontouchstart = resetTimer; document.onclick = resetTimer; // touchpad clicks document.onkeypress = resetTimer; document.addEventListener('scroll', resetTimer, true); // improved; see comments 

Или зарегистрируйте нужные события, используя массив

 window.addEventListener('load', resetTimer, true); var events = ['mousedown', 'mousemove', 'keypress', 'scroll', 'touchstart']; events.forEach(function(name) { document.addEventListener(name, resetTimer, true); }); 

Список событий DOM : http://www.w3schools.com/jsref/dom_obj_event.asp

Не забудьте использовать window или document соответствии с вашими потребностями. Здесь вы можете увидеть различия между ними: В чем разница между окном, экраном и документом в Javascript?

Код, обновленный с помощью @ frank-conijn и @daxchen, улучшается: window.onscroll не будет срабатывать, если прокрутка внутри прокручиваемого элемента, потому что события прокрутки не всплывают. window.addEventListener('scroll', resetTimer, true) , третий аргумент говорит слушателю перехватывать событие во время фазы захвата вместо фазы пузыря.

§

Вы просили элегантности, и я создал простой класс, который также поддерживал бы ленивую проверку (которая имеет состояние ожидания), кроме императивного способа (с обратными вызовами). Кроме того, этот класс поддерживает «backToActive», когда время простоя нарушается.

 class Idle { constructor(timeout = 10, idleCallback = null, backToActiveCallback = null, autoStart = true, backToActiveOnXHR = false) { this.timeout = timeout this.idleCallback = idleCallback this.backToActiveCallback = backToActiveCallback this.autoStart = autoStart // only F5 this.backToActiveOnXHR = backToActiveOnXHR this.idle = false this.timer = null this.events = ['scroll', 'mousedown', 'mousemove', 'keypress', 'scroll', 'touchstart'] this.init() } init() { if(this.backToActiveOnXHR) { this.events.push('load') } this.events.forEach(name ={amp}gt; { window.addEventListener(name, this.backToActive, true) }) if(this.autoStart) { this.backToActive() } } goIdle = () ={amp}gt; { this.idle = true if(!!this.idleCallback) { this.idleCallback(this.timeout) } } backToActive = () ={amp}gt; { if(this.idle) { this.backToActiveCallback() } this.idle = false clearTimeout(this.timer) this.timer = setTimeout(this.goIdle, this.timeout * 1000) } } 

Использование:

 let idleCallback = timeout ={amp}gt; { console.log(`Went idle after ${timeout} seconds`) } let backToActiveCallback = () ={amp}gt; { console.log('Back to active') } let idle = new Idle(30, idleCallback, backToActiveCallback) 

Результат в devtools:

 // Went idle after 30 seconds {amp}lt;--- goes idle when no activity is detected // Back to active {amp}lt;--- when the user is detected again 

Преимущество поддержки лени:

 setInterval(() ={amp}gt; { common.fetchApi('/api/v1/list', { status: idle.idle ? 'away' : 'online' }).then(/* show a list of elements */) }, 1000 * 5) 

Зачем вам ленивый чек? Иногда мы используем периодический XHR (с setInterval), т.е. когда пользователь просматривает список рейсов, поездок, фильмов, заказов и т. Д. С каждым XHR мы можем затем добавить информацию о его статусе активности (онлайн / нет), поэтому у нас есть Чувство активных пользователей в нашей системе.

Мой класс основан на ответах Эквимана и Фрэнка Конейна.

Понравилась статья? Поделиться с друзьями:
JavaScript & TypeScript
Adblock
detector