Optimisation des animations pilotées par onMouseMove

Question

Pour ajouter de la personnalité à notre application Web, j'ai ajouté une petite animation sur certains éléments où notre mascotte de robot jaillit par derrière lorsque la souris se rapproche. Pour ce faire, j'ai utilisé la fonction onmousemove pour vérifier la distance du curseur et animer le robot lorsque la souris se rapproche.

Cela fonctionne très bien, mais il semble terriblement non optimisé d'exécuter cette fonction plusieurs fois par seconde tout le temps où un utilisateur déplace sa souris, même s'il n'anime rien. Ma question est, y a-t-il d'autres méthodes courantes pour faire des animations comme celle-ci qui ne sont pas utilisées en tant que CPU sans nécessité?

Vous pouvez voir des exemples et le code sur notre blog ici http://www.hiringthing.com/2011/10/31/buttons-with-a-surprise.html

Merci

Answer 1

Vous pouvez attacher et enlever le gestionnaire d'événements lors du survol de la section principale de la page afin qu'il ne fonctionne pas quand en utilisant la navigation et d'autres zones de la page. Si vous avez plusieurs éléments sur la page comme dans votre démo, il n'y a probablement pas grand-chose d'autre à faire.