Maison > Article > interface Web > Expliquer comment fonctionnent les minuteries en JavaScript

Expliquer comment fonctionnent les minuteries en JavaScript

WBOYavant: 2023-08-25 10:05:02854parcourir

解释 JavaScript 中定时器的工作原理

En JavaScript, les minuteries sont une fonctionnalité très remarquable. Comme une minuterie de montre normale, nous pouvons démarrer la minuterie à une certaine heure et exécuter une fonction ou un code en JavaScript après une heure spécifique.

En termes simples, nous pouvons utiliser une minuterie pour exécuter du code après un délai. Par exemple, lorsque vous visitez un site Web, la boîte d'inscription s'affichera au bout de 3 à 4 minutes. Nous pouvons utiliser JavaScript pour y parvenir. Nous pouvons définir un retardateur pour afficher la fenêtre contextuelle d'inscription.

Un autre excellent exemple de minuterie dans la vie réelle est la publicité intégrée à l'application. Lorsque vous ouvrez une application, elle commence à diffuser des annonces après 2 à 3 minutes et change d'annonces à intervalles de 1 à 2 minutes.

Il existe donc deux fonctions différentes en JavaScript pour définir des minuteries, que nous explorerons dans ce tutoriel.

Utilisez la fonction setTimeOut() pour exécuter du code après une heure spécifique

La fonction

setTimeOut() nous permet d'exécuter du code après un délai spécifique. Cependant, cela nous permet de définir des délais. Il exécute le code une seule fois après un délai spécifique.

Lorsque la fonction setTimeOut() est exécutée, elle démarre le minuteur et exécute la fonction de rappel après un délai spécifique.

Grammaire

Les utilisateurs peuvent utiliser la fonction setTimeOut() selon la syntaxe suivante.

let timeoutId = setTimeout(callback, delay);

Dans la syntaxe ci-dessus, la fonction de rappel peut également être exécutée comme une fonction fléchée.

Paramètres

Callback – Il s'agit d'une fonction qui est exécutée après un délai.
Delay – Le délai est le temps (en millisecondes) après lequel la fonction de rappel est exécutée.

Valeur de retour

La fonction

setTimeOut() renvoie un identifiant unique que nous pouvons utiliser pour terminer le minuteur.

Exemple

Dans l'exemple ci-dessous, lorsque l'utilisateur clique sur le bouton "Démarrer le minuteur", il appelle la fonction callTimer(). L'utilisateur peut voir qu'il affiche "la fonction callTimer a été exécutée en premier", et après 2000 millisecondes, puisque la fonction setTimeOut() a appelé la fonction de rappel après 2000 millisecondes, elle a imprimé "cette fonction est exécutée après un délai".

<html>
   <body>
      <h2> Using the setTimeOut() function </h2>
      <div id = "output"> </div>
      <button id = "btn" onclick = "callTimer()"> Start Timer </button>
      <script>
         let output = document.getElementById("output");
         output.innerHTML += "Program execution started </br>";
         function callTimer() {
            output.innerHTML = "The callTimer function executed  <br/>";
            setTimeout(callback, 2000);
         }
         function callback() {
            output.innerHTML += "This function executed after some delay.";
         }
      </script>
   </body>
</html>

Utilisez la fonction setInterval() pour exécuter la fonction après chaque intervalle de temps

La fonction

setTimeOut() n'exécute la fonction de rappel qu'une seule fois, mais la fonction setInterval() exécute le code après chaque intervalle de temps que nous passons comme deuxième argument à setInterval().

Grammaire

Les utilisateurs peuvent utiliser la fonction setInterval() selon la syntaxe suivante.

setInterval(callback, interval)

Paramètres

Callback – Il s'agit de la fonction que la fonction setInterval() appelle après chaque intervalle de temps.
Interval – Le temps en millisecondes après lequel la fonction de rappel est appelée après chaque intervalle.

Valeur de retour

La fonction setInterval() renvoie également un identifiant unique comme la fonction setTimeout(), que nous pouvons utiliser pour arrêter le minuteur.

Exemple

Dans cet exemple, nous utilisons la fonction setInterval() pour appeler la fonction de rappel toutes les 1000 millisecondes. L'utilisateur peut observer que lorsque le bouton de démarrage de la minuterie est enfoncé, la fonction startInterval() est exécutée et la fonction setInterval() est appelée. La fonction setInterval() appelle la fonction de rappel une fois par seconde.

<html>
   <body>
      <h2> Using the <i> setInterval() </i> function </h2>
      <div id = "output"> </div>
      <button id = "btn" onclick = "startInterval()"> Start Timer </button>
      <script>
         let output = document.getElementById("output");
         let count = 0;
         output.innerHTML += "Program execution started </br>";
         
         // when user clicks on the button, startInterval() function will be called
         function startInterval() {
            output.innerHTML = "The callTimer function executed <br/>";
            
            // the setInterval() function will call the callback function after every second.
            setInterval(callback, 1000);
         }
         function callback() {
            output.innerHTML += "This function executed for " + count + " time </br>";
            
            // update the count to track of howmany times a callback is called.
            count = count + 1;
         }
      </script>
   </body>
</html>

Utilisez les fonctions clearTimeOut() et clearInterval() pour terminer le minuteur

Après avoir démarré le chronomètre, nous devons également l'arrêter. Nous pouvons utiliser la fonction clearTimeOut() pour arrêter la fonction setTimeOut() et la fonction clearInterval() pour arrêter la fonction setInterval().

Grammaire

// To stop the setTimeOut() function
clearTimeout(TimerId);

// To stop the setInterval() function
clearInterval(TimerId);

Paramètres

TimerId – C'est l'ID unique renvoyé par la fonction setTimeOut() ou setInterval().

Exemple

Dans l'exemple ci-dessous, nous utilisons la fonction timer setInterval() pour appeler la fonction toutes les secondes. De plus, nous suivons le nombre de fois où la fonction setInterval() appelle la fonction de rappel.

Dans la fonction de rappel, nous utilisons une instruction if pour vérifier si le nombre est supérieur à 3 et utilisons la fonction clearInterval() pour mettre fin au minuteur.

<html>
   <body>
      <h2> Using the <i> clearInterval() </i> function </h2>
      <div id = "output"> </div>
      <button id = "btn" onclick = "startInterval()"> Start Timer </button>
      <script>
         let output = document.getElementById("output");
         let count = 0;
         let TimerId = "";
         function startInterval() {
            TimerId = setInterval(() => {
               output.innerHTML += "count = " + count + "<br/>";
               count += 1;
               if (count > 3) {
                  clearInterval(TimerId);
               }
            }, 1000);
         }
      </script>
   </body>
</html>

Dans la sortie ci-dessus, l'utilisateur peut observer qu'il imprime jusqu'à ce que le nombre = 3 car lorsque le nombre est supérieur à 3, nous terminons le minuteur.

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!

JavaScript if count 回调函数

Déclaration：

Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer

Article précédent：Comment ajouter des éléments horizontalement dans une page HTML en utilisant JavaScript ?Article suivant：Comment ajouter des éléments horizontalement dans une page HTML en utilisant JavaScript ?

Articles Liés

Voir plus