Как отлавливать бездействие на сайте?

112

31 мая 2021, 15:40

Хочу на страницах создаваемого сайта отлавливать сабж (допустим 30 сек ни мышки, ни клавы, ни тачпада, ни ресайза) и запускать какую-нибудь циклическую прокрутку анимации. Пока пользователь не начнет что-то делать.

Подскажите идеи, плс. А еще лучше кусочек кода для примера.

Answer 1

let inactivityTime = () => { 
  let time, 
    loader = document.querySelector('.invisible'); 
 
  // сюда можно добавить любой ивент. 
  document.addEventListener('mousemove', resetTimer); 
  document.addEventListener('keypress', resetTimer); 
 
  function resetTimer() { 
    loader.classList.add('invisible'); 
    clearTimeout(time); 
    time = setTimeout(fn, 1000) 
  } 
 
  function fn() { 
    loader.classList.remove('invisible'); 
  } 
}; 
 
document.addEventListener('DOMContentLoaded', () => { 
  inactivityTime(); 
});

.loader { 
  border: 1px solid red; 
  height: 50px; 
  width: 50px; 
} 
 
.invisible { 
  display: none; 
}

<div class="loader invisible"></div>

Answer 2

Когдато я делал сайт, на любой странице которого по исстечении времени бездействия пррисходит переход на отдельную страницу, на которой находится анимационная заставка. Там при первом движении мыши или первом нажатии на любую клавишу происходит возврат на страницу, с которой был автопереход на заставку, а адрес возврата с неё передаётся в виде GET-запроса. В этом примере сначаоа идёт код страницы сайта, которую просматривали и с неё перешли на заставку:

<script> 
var mytime = mytime1 = 300; 
document.onmousemove = document.onkeydown = document.onscroll = function(){mytime = mytime1}; 
setInterval(function(){ 
	console.log(mytime); 
	mytime --; 
	if(mytime <=0 )location.href = "screensaver.html?" + location.href; 
}, 1000); 
</script>

В этом случае время бездействия - 300 сек. А вот код страницы с заставкой. Тут она находится в файле screensaver.html:

<canvas id=canvas height=300 style="width:100%;height:100%"></canvas> 
<script> 
var callback = location.search.substring(1); 
var ctx = document.getElementById("canvas").getContext("2d"); 
setInterval(function(){ 
	ctx.clearRect(0, 0, canvas.width, canvas.height); 
	for(i = 0; i < 100; i ++)ctx.fillRect(canvas.width * Math.random(), canvas.height * Math.random(), 15, 15); 
}, 500); 
document.onmousemove = document.onkeydown = function(){location.href = callback}; 
</script>

Там уже есть один из самых простых вариантов анимации.

Answer 3

Вот есть такой пример, он настраиваемый. Надеюсь вам поможет!

    let time = 0;
    $(document).ready(function () {
        //здесь функция срабатывает раз в минуту, можно настроить как вам удобно
        let interval = setInterval(idleTimer, 60000); 
        //тут можно добавлять все события которые не должны срабатывать(нажатие на клавиши, ресайз и т.д.)
        $(this).on('mousemove', function (e) {
            time = 0;
        });
    });
    //тут задаем время простоя, сейчас стоит 3 минуты
    function idleTimer() {
        time = time + 1;
        if (time > 2) { 
            //здесь нужное вам действие на простой
        }
    }