Активность пользователя и блокировка

167
02 января 2020, 03:00

Пользователь оставляет открытой страницу браузера (может не появляться сутки), но так как страница открыта, то все фоновые Ajax-запросы выполняются (обновление элементов страницы). Я считаю это лишней тратой ресурсов сервера в отсутствие пользователя. Вопросы:

1. Как вычислить, что в течение 10 минут пользователь не производит на странице никаких действий?

2. Как полностью заблокировать выполнение JS до появления активности на странице?

3. Как узнать, что на странице появилась активность?

Сайт адаптивный. Поэтому используется на всех устройствах. Если к примеру, на компьютере можно поймать движение мыши и посчитать это активностью, то на мобильных mouse не работает.

Answer 1

Предлагаю определять активен пользователь или нет как-то так:

let timeout = 3000; 
let lastActiveTimestamp = 0; 
let userIsActive = false; 
 
window.addEventListener('mousemove', active); 
window.addEventListener('keypress', active); 
window.addEventListener('click', active); 
 
setInterval(checkUserIsActive, 1000) 
active(); 
 
function checkUserIsActive() { 
  if (userIsActive && new Date().getTime() - lastActiveTimestamp > timeout){ 
    console.log('user is not active'); 
    document.querySelector('div').textContent = 'user is inactive'; 
    userIsActive = false; 
  } 
} 
 
function active() { 
  lastActiveTimestamp = new Date().getTime(); 
  if (!userIsActive) { 
    userIsActive = true; 
    console.log('user is active'); 
    document.querySelector('div').textContent = 'user is active'; 
  } 
}
<div style="color:red"></div> 
<br><br><br> 
<span>Нажмие на любую клавишу или двигайте мышь<span>

PS: тут стоят проверки на mousemove, click и keypress

PPS: жуквери тут и не пахнет ибо а зачем?

READ ALSO
Остановить анимацию и вызвать ее callback?

Остановить анимацию и вызвать ее callback?

Эксперты, необходимо остановить анимацию jquery и вызвать callback-функцию, как остановить я знаю,stop(true, true), но как вызвать callback-функцию этой анимации...

179
JQuery each event

JQuery each event

Есть плагин JQuery, который работает с элементами на странице

199
Slick слайдер / Движение от края к краю

Slick слайдер / Движение от края к краю

возникла такая задачка, имеется слайдер 100% ширины,имеется slickjs,задачка в том, что слайдер изначально показывает 2 слайда с левой стороны экрана,...

168
Валидация данных на форме с Todo List [закрыт]

Валидация данных на форме с Todo List [закрыт]

Хотите улучшить этот вопрос? Переформулируйте вопрос, чтобы он был сосредоточен только на одной проблеме, отредактировав его

211