Make a rest screen with Jquery

Question

I need to make a rest screen, when the mouse stand still for a few seconds opens the div of rest, tried it unsuccessfully:

<script type="text/javascript">
$(window).mousemove(function(event) {
   clearTimeout(timer);
   timer = setTimeout(function() {
      $('#result').fadeIn('fast');
   }, 10000);

});
</script>  

When the mouse moves again the div some.

Answer 1

You can make one like this:

var s_saver;

$('body').mousemove(function() {
    clearTimeout(s_saver);

    s_saver = setTimeout(function(){
        $('#screensaver').fadeIn(900);
    }, 4000);

    $('#screensaver').fadeOut(100);
});

Fiddle

The effect is caused by .fadeIn() leaving the elements opaque and .fadeOut() which hides the elements until they are transparent. In the example above this happens after four seconds, when the event occurs .mousemove the countdown is restarted.

_Fonte

Answer 2

You can do it like this:

var ultimoMovimento = new Date();
var janela = $('#janela');
$(window).on('mousemove', function () {
    ultimoMovimento = new Date();
    janela.hide();
});
var verificar = setInterval(function () {
    var agora = new Date();
    var diferenca = (agora.getTime() - ultimoMovimento.getTime()) / 1000;
    if (diferenca > 10) janela.show();

}, 3000);

Example

My idea is:

• record the time (in milliseconds) when the page loads, and each time the mouse has movement.
• check every 3 seconds if the difference between the time at that time and the time recorded before is greater than 10 seconds.
• shows the window when the idle time is more than 10 seconds
• hides the window when the mouse moves

---

Another variant is to have an auxiliary function that (re)starts a countdown when the mouse moves.

function esperar() {

    janela.hide();
    var limpar;
    clearInterval(limpar);
    limpar = setTimeout(function () {
        janela.show();
    }, 10000); // 10 segundos, 10 000 milisegundos
}

var janela = $('#janela');
$(window).on('mousemove', esperar);

Example

Answer 3

Here is an example: (PLUNKR)

  $( document ).ready(function() {
    var timeout = setTimeout(showTela, 3000);
    $(document).mousemove(onEvent);
    $(document).mousedown(onEvent);
    $(document).keydown(onEvent);


    function onEvent() {
      $('#tela').hide();
      clearTimeout(timeout);
      timeout = setTimeout(showTela, 3000);
    }

    function showTela() {
      $("#tela").show();
    }
  });

Basically what is missing from your script is to reset the timer when the mouse moves.