Make a rest screen with Jquery

Here's 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 resetting the timer when the mouse moves.

You can do 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 moves.
• Check every 3 seconds if the difference between the time at that time and the time previously recorded is greater than 10 seconds.
• shows the window when the idle time is more than 10 seconds
• Hide the window when the mouse moves

Another variant is having an auxiliary function that (re) starts counting down 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

You can do 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() that leaves opaque elements and .fadeOut() " that hides the elements until they are transparent. In the above example this happens after four seconds, when the .mousemove event occurs, the count is restarted.

Fonte