Je sais que les minuteries sont depuis un certain temps une fonctionnalité que beaucoup de gens utilisent dans leurs tâches quotidiennes. Dans le monde JavaScript, les timers sont souvent implémentés avec les fonctions setTimeout ou setInterval, la mauvaise nouvelle pour vous si vous le faites est que ce n'est pas une bonne pratique et je vais essayer de vous expliquer pourquoi.

Avant de commencer à expliquer ma pensée, j'ai une question à vous poser : peut-on utiliser une montre qui donne la mauvaise heure ?

Si votre réponse est oui, je suis désolé d'avoir perdu votre temps précieux car cet article ne vous appartient pas.

En revanche, si votre réponse est négative, je vous expliquerai pourquoi utiliser setTimeout ou setInterval revient à utiliser une montre endommagée pour obtenir l'heure.

Le problème avec ces fonctions

Pour commencer, considérons l'extrait suivant

 function test() {
   let i = 0;
   setTimeout(() => console.log("hello"), 0);
   while (i 


si vous exécutez cet extrait dans la console de votre navigateur, vous obtiendrez le résultat suivant 



Ce comportement est dû au fait que setTimeout ajoute le rappel dans la file d'attente du navigateur afin qu'il le traite une fois inactif (n'a pas de tâche à faire) autrement dit le rappel passé à setTimeout a une faible priorité

Maintenant, sachant cela, j'imagine qu'il vous sera difficile d'implémenter des minuteries à l'aide de la fonction setTimeout car vous pouvez avoir 2 voire 10 ticks (selon le degré d'occupation de votre navigateur) en même temps. Ce sera un cauchemar à déboguer, mais avons-nous une meilleure solution ?

  
  
  Un moyen d'éviter ces fonctions


Pour fournir une meilleure façon d'implémenter les minuteries, nous devrions utiliser la fonction requestAnimationFrame car elle indique au navigateur d'exécuter un rappel avant le prochain paint (en d'autres termes avant qu'un changement dans l'interface utilisateur ne se produise)

La différence ici est assez subtile, il est donc préférable de la comprendre à travers le code. Reprenons notre extrait précédent et modifions-le un peu pour comparer setTimeout et requestAnimationFrame

function testWithAnimationFrame() {
  let i = 0;
  setTimeout(() => console.log("hello"), 0);
  requestAnimationFrame(() => console.log("tell me the next paint"));
  while (i 


Dans cet exemple, nous pouvons voir que lors de l'exécution sur Chrome, le setTimeout s'exécute avant requestAnimationFrame (bien que dans de rares cas, l'inverse se produise)



Mais si vous l'exécutez sur Firefox, ce sera le résultat



Cela peut sembler déroutant, mais si vous y prêtez un peu d'attention, vous vous rendrez compte qu'aucun dessin ne se produit pendant l'exécution, donc la façon dont ce scénario est géré dépend du navigateur.

Maintenant, si nous pouvons modifier notre extrait pour que le navigateur repeint la page, voyons ce qui va se passer

function testWithAnimationFrame2() {
  let i = 0;
  setTimeout(() => console.log("hello"), 0);
  requestAnimationFrame(() => console.log("tell me the next paint"));
  while (i 


Voici le résultat sur Chrome



Et voici le résultat dans Firefox



Comme vous pouvez le voir dans les journaux, lorsque le navigateur apporte des modifications à l'interface utilisateur, la fonction requestAnimationFrame aura toujours la priorité sur les autres rappels planifiés.

Parce que sur le Web, nous effectuons constamment des repaints, requestAnimationFrame est un choix évident pour implémenter des minuteries.

  
  
  Comprendre la fonction requestAnimationFrame


La fonction prend uniquement un rappel en paramètre. Pour fournir un contexte au rappel, il doit prendre un horodatage indiquant l'heure à laquelle l'image précédente s'est terminée en fonction de l'heure du rendu initial de la page.

La fonction retournera un entier représentant l'identifiant de la requête, cela peut être utile si vous souhaitez annuler la requête avec la fonction CancelAnimationFrame.

  
  
  Une implémentation simple d'un chronomètre en JavaScript


Pour mettre en œuvre un chronomètre, il y a certaines conditions :

• Nous devrions savoir au bout de quel laps de temps il doit tic-tac (généralement une seconde)
• Nous devrions connaître le délai après lequel le chronomètre devrait arrêter de tourner
• Les intervalles de tic-tac doivent être inférieurs au délai

En tenant compte de toutes ces exigences, l'extrait de code suivant créera un chronomètre pour vous

Sortie

Je sais que cela a peut-être été une longue lecture, mais je crois que vous l'avez apprécié. Quoi qu'il en soit, si vous avez des questions ou si vous avez des suggestions, n'hésitez pas à me contacter.

Merci de l'avoir lu et au revoir ?