Graphoeil Multimédia
Menu

Économies de ressources avec setTimeout sur scroll, resize et mousemove events

Évitez les baisses de performances lors d'événements répétitifs.

Alors qu'un événement peut être déclenché jusqu'à 24 fois par seconde et ralentir d'autant la fluidité de vos sites web en exécutant sa fonction associée, voici une astuce pour ne la déclencher que quelques fois.

Nous commençons par créer une variable timer que nous initialisons à 0, puis nous écoutons notre événement (ici resize), si le timer n'existe pas nous le créons et déclenchons la fonction, à la fin de celle-ci nous repassons le timer à 0. En déclenchant notre timer toute les 100ms nous exécuterons la fonction 10 fois / seconde et seulement 4 fois en le réglant à 250ms.

$(function(){ var timer = 0; $(window).on('resize',function(){ if (!timer){ timer = setTimeout(function(){ // actions à réaliser lors du resize timer = 0; },100); } }); });

Une astuce bien utile pour la création de site internet utilisant beaucoup d'animations ou lors de l'écoute des événements mousemove de la souris.