Vous n'avez pas besoin de définir le délai d'attente

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 pour vous : 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, c'est comme 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 < 5) {
     console.log("number ", i);
     i += 1;
  }
  console.log("world");

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 pour 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 l'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 que tout 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 < 5) {
    console.log("number ", i);
    i += 1;
  }
  console.log("world");
}

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 < 5) {
    console.log("number ", i);
    i += 1;
    document.body.style.backgroundColor = "red";
  }
  console.log("world");
}

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 du 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 place un chronomètre, il y a certaines conditions :

• Il faut 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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!