Maison > Article > interface Web > Comment déclencher immédiatement une boucle setInterval en utilisant JavaScript ?

Comment déclencher immédiatement une boucle setInterval en utilisant JavaScript ?

王林avant: 2023-08-24 16:05:052766parcourir

La méthode

如何使用 JavaScript 立即触发 setInterval 循环？

setInteral() nous permet de déclencher en continu la fonction de rappel après chaque période de temps spécifique. Nous pouvons passer la fonction de rappel comme premier paramètre à déclencher après chaque période de temps et la période de temps en millisecondes comme deuxième paramètre.

La méthode

setInterval() appelle la fonction de rappel après le premier nombre spécifique de millisecondes. Maintenant, le problème est que nous devons appeler la fonction de rappel immédiatement pendant les 0 premières millisecondes et après cela, nous devons l'appeler en continu pendant une période de temps donnée.

Exemple

Dans l'exemple ci-dessous, nous avons créé la fonction func() qui imprime le message du document. Nous avons utilisé la méthode setInterval() qui appelle la fonction func() toutes les 3000 millisecondes.

<html>
<body>
   <h3> Using the <i> setInteral() </i> method to invoke the particular function continuosly </h3>
   <div id = "output"> </div>
   <script>
      let output = document.getElementById('output');
      output.innerHTML += "Please wait ...." + "<br>";
      function func() {
         output.innerHTML += "The func() function is invoked!" + "<br>";
      }
      setInterval(func, 3000);
   </script>
</body>
</html>

Dans le résultat, l'utilisateur peut observer que la méthode setInteraval() appelle la fonction func() pour la première fois après 3000 millisecondes.

Les utilisateurs peuvent appeler la fonction func() pour la première fois à 0 milliseconde comme suit.

Appelez cette fonction pour la première fois, puis utilisez la méthode setInterval()

Lors de l'utilisation de la méthode setInterval(), une façon d'appeler la fonction sans délai est d'appeler la fonction pour la première fois.

Lorsque nous appelons cette fonction pour la première fois, elle s'exécutera à 0ème milliseconde. Après cela, la méthode setInterval() exécutera continuellement la fonction après une certaine période de temps.

Grammaire

La première fois que l'utilisateur utilise la méthode setInterval(), la fonction peut être appelée immédiatement selon la syntaxe suivante.

func_name()
setInterval(func_name, 1000);

Dans la syntaxe ci-dessus, nous avons appelé la fonction func_name() pour la première fois puis toutes les 1000 millisecondes.

Exemple

Dans l'exemple ci-dessous, la fonction func() utilise la méthode setInterval() pour appeler un message toutes les 1000 millisecondes. Afin d'appeler la fonction pour la première fois sans délai, nous appelons d'abord la fonction, puis appelons la fonction en utilisant la méthode setInteral().

<html>
<body>
   <h3> Invoking the function for the first time and, after that, using the setInteral() method to invoke the particular function continuously. </h3>
   <div id = "output"> </div>
</body>
   <script>
      let output = document.getElementById('output');
      function func() {
         output.innerHTML += "The func() function is invoked!" + "<br>";
      }
      func()
      setInterval(func, 1000);
   </script>
</html>

Créez une fonction immédiatement appelée dans la méthode setInteral()

Une fois que nous avons créé une expression de fonction, la fonction immédiatement appelée l'appellera immédiatement. Par conséquent, nous pouvons utiliser l’expression call-function-immediate pour appeler la fonction pour la première fois sans délai. Nous pouvons également utiliser la méthode setInterval() à l’intérieur de la fonction pour exécuter la fonction à un intervalle de temps spécifique.

Grammaire

Lors de l'utilisation de la méthode setInterval(), les utilisateurs peuvent utiliser l'expression de fonction qui est appelée immédiatement selon la syntaxe suivante pour exécuter la fonction sans délai.

(function name() {
   setInterval(name, 3000);
})()

Dans la syntaxe ci-dessus, nous avons écrit l'expression de la fonction entre accolades, puis écrit les accolades ouvrantes et fermantes pour appeler la fonction immédiatement.

Exemple 3

L'exemple ci-dessous crée une fonction de test qui est appelée après chaque intervalle de temps à l'aide de la méthode setInterval(). Nous écrivons la fonction test() sous la forme d'une expression de fonction appelée immédiatement et utilisons la méthode setInterval() dans la fonction pour appeler la fonction test() toutes les 3 000 millisecondes.

Nous pouvons observer le résultat de la fonction de test lorsqu'elle est appelée pour la première fois à 0 milliseconde, puis toutes les 3000 millisecondes lorsque la page Web est actualisée.

<html>
<body>
   <h3> Using the immediately invoked function expression to invoke the function without delay for the first time while using the setInteral() method </h3>
   <div id = "output"> </div>
   <script>
      let output = document.getElementById('output');
      (function test() {
         output.innerHTML += "The test() function is invoked!" + "<br>";
         setInterval(test, 3000);
      })()
   </script>
</body>
</html>

Pour la première fois, les utilisateurs ont appris à appeler sans délai les fonctions utilisées dans la méthode setInterval(). L'utilisateur peut appeler la fonction pour la première fois ou utiliser une expression de fonction appelée immédiatement.

Il est recommandé d'appeler la fonction pour la première fois au lieu d'utiliser une expression de fonction immédiatement appelée car elle appellera la fonction de manière récursive. L'expression de fonction qui est appelée immédiatement après un certain intervalle de temps appelle la fonction une infinité de fois lorsque nous y utilisons la méthode setInterval().

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 回调函数递归循环

Déclaration：

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

Article précédent：Évaluation d'expressions mathématiques en tenant compte de la priorité des opérateurs en JavaScriptArticle suivant：Évaluation d'expressions mathématiques en tenant compte de la priorité des opérateurs en JavaScript

Articles Liés

Voir plus