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.