jQuery - Simple Screensaver

Question

J'essaie de construire un économiseur d'écran très simple, mais ce n'est pas aussi facile que je le pensais.

Ma solution n'a pas vraiment fonctionné et c'est IMHO vraiment sale.

Quelqu'un a-t-il eu une bonne idée? Peut-être sans un délai d'attente?

HTML

<div id="screensaver" style="width:100%; height:100%; background-color:#000000; display:none;" > &nbsp; </div> 

JS

$('body').live('mousemove', function (e) 
    { 

     if (e.type == 'mousemove') 
     { 
     clearTimeout(s_saver); 
     s_saver = setTimeout('$(\'#screensaver\').fadeIn();', 4000); 
     $('#screensaver').hide();   
     } 

    }); 

http://jsfiddle.net/mwhJJ/4/

Merci à l'avance!
Peter

Answer 1

Le principal problème avec votre script est que la variable s_saver n'est pas déclarée correctement, et est dans le mauvais champ - vous avez besoin d'être lu encore la prochaine fois que le gestionnaire d'événements est appelé, vous devez donc déclarer en dehors de la portée du gestionnaire. Cela devrait fonctionner (jsfiddle version):

var s_saver; 

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

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

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

Bien sûr, cela dépend toujours de ce que vous voulez atteindre. Si, par exemple, vous voulez montrer quelque chose pendant que votre utilisateur ne regarde pas cet onglet/fenêtre au lieu de simplement ne pas déplacer la souris, alors la solution fournie dans cette question devrait faire: How to detect inactive tab and fill it with color

Answer 2

Ne pensez-vous pas que le navigateur se bloque en écoutant des événements de déplacement de la souris contineous ....? ne pas te démotiver mais juste une idée.