Maxy.fr

Eviter les ralentissements d'un compteur Javascript sur un onglet non actif

Si vous essayez de faire un compteur qui s'incrémente toutes les secondes en Javascript, vous remarquerez que tout fonctionne correctement lorsque vous êtes sur l'onglet en question, mais que celui-ci subira des ralentissements lorsque l'onglet n'est pas actif. Vous avez donc une désynchronisation entre le nombre de secondes compté et la réalité.

Voici une méthode simple pour éviter ce problème

Il vous faudra utiliser Date.now() afin d'obtenir le nombre de millisecondes écoulées depuis le 1er janvier 1970.

Voilà un exemple de code :

var tsDepart = Date.now();
var secondes = 0;

var timer = setInterval(function(){

	secondes = Math.round((Date.now()-tsDepart)/1000);

},1000);

On enregistre dans un premier temps la valeur de Date.now() dans une variable "tsDepart", on créé une fonction qui sera exécutée toutes les secondes à l'aide de "setInterval()". Puis on calcul le nombre de secondes écoulées depuis le moment où on a enregistré la variable "tsDepart". Pour cela on fait la différence entre le Date.now() actuel et celui de départ, on divise le résultat par 1000 afin d'obtenir un résultat en secondes et on arrondit la valeur obtenue à l'aide de Math.round().

Les ralentissements ne disparaîtront pas, mais la valeur du compteur sera toujours correcte.

Catégories : Javascript

Par Guillaume le 20/11/2016 à 19:15

Partager l'article :

Articles similaires

Demander une confirmation en Jquery lors du clique sur un lien

Parce qu'il est parfois utile de demander une confirmation lorsque l'on clique sur un lien avant d'être redirigé - lorsque ce lien permet la suppression de quelque chose par exemple - et qu'il est assez lourd de devoir le faire en PHP, voici un petit code Jquery permettant de le faire...

Exécuter une fonction à retardement en javascript

Il est parfois utile d'exécuter une fonction avec quelques secondes voir quelques minutes de retard. Sachez que c'est très simple à réaliser grâce à la méthode setTimeout(fonction, temps). Cette méthode vous demandera deux arguments : la...

Récupérer l’adresse IP d’un visiteur dans un script Javascript

Il arrive parfois que l’on ait besoin de récupérer des informations à l’aide d’un script Javascript. Notamment l’adresse IP de la personne qui se connecte sur son site. Il est facile à l’aide du langage PHP de récupérer cette...