Comment retarder / attendre dans l'exécution du code JavaScript?
Initialement, cela peut ne pas sembler un gros problème, mais à mesure que vous progressez dans le monde de la programmation, vous réaliserez l'importance des fonctions de «retard» et «d'attente». Donc, s'il n'y a pas de fonction d'attente \ delage \ Sleep, il n'y a aucun moyen de contrôler l'exécution d'un programme en JavaScript? Eh bien, il existe différentes fonctions et méthodes qui nous aident à atteindre la même tâche en javascript.
Utilisation de la fonction setTimeout ()
La première méthode la plus courante dans la mise en œuvre d'un retard dans l'exécution d'un code JavaScript est d'utiliser le setTimeout () méthode. Vous ferez une erreur très courante de supposer que la syntaxe est:
setTimeout (retard dans MS);Alors qu'en réalité, cette méthode prend une fonction de rappel. En gardant cela à l'esprit, nous pouvons regarder la syntaxe comme:
Syntaxe de la fonction setTimeout ()
setTimeout (fonction, retard dans MS);Pour mieux comprendre le fonctionnement du setTimeout () Méthode, essayons de résoudre un problème.
Exemple
Supposons que nous voulons imprimer des nombres de 1 à 10, avec un délai de 1 seconde entre chaque numéro.
La manière traditionnelle serait:
pour (soit i = 1; i <=10 ; i++ )setTimeout (1000);
console.journal (i);
La sortie du code imprime instantanément les 10 chiffres comme:
Parce que nous ne transmettons rien à la méthode setTimeout ().
Pour ajouter le retard à l'aide de la méthode setTimeout (), nous pensons que la bonne façon est:
pour (soit i = 1; je console.journal (i), 1000);Plutôt que d'obtenir un délai de 1 seconde après chaque numéro, ce que nous obtenons est un délai de 1 seconde au début, puis tous les chiffres sont imprimés instantanément. Comme indiqué ci-dessous:
Nous avons eu le retard initial, mais pas de retard après cela. Pourquoi est-ce si? Eh bien, la façon dont le setTimeout () fonctionne est qu'il fonctionne toujours en mode synchrone. Cela signifie que même avoir plusieurs appels vers la même fonction entraînera le retard de 1 sec.
Ce que nous avons fait, c'est que nous avons invoqué chacun setTimeout () Méthode une après l'autre et en raison de la nature asynchrone du setTimeout () Méthode, il n'attend pas le précédent setTimeout () Méthode pour terminer puis exécuter la suivante.
Donc, finalement, nous avons passé 10 appels à setTimeout () Méthode Ayant le même temps de retard. Il existe un moyen de résoudre ce problème, et c'est en utilisant l'augmentation du temporisateur de retard comme:
setTimeout (() => console.journal (i), 1000);setTimeout (() => console.Log (i), 2000);
setTimeout (() => console.journal (i), 3000);
L'exemple de code ci-dessus de l'impression 10 nombres deviendrait le suivant:
pour (soit i = 1; je console.journal (i), i * 1000);Nous utilisons la valeur croissante de la variable «i» et la multiplions avec le retard d'une seconde pour créer des retards d'incrémentation pour chaque appel de setTimeout ()
La sortie avec cela devient:
Nous l'avons finalement fait. Mais il y a encore quelque chose qui ne va pas ici. C'est le fait que le calcul des retards de cette façon est très compliqué, surtout lorsque vous travaillez dans une application du monde réel. Il existe également un moyen pour cela, créez votre propre méthode de retard / d'attente.
Comment coder votre propre fonction de retard / d'attente?
Nous voulons une meilleure solution, ce que nous pouvons faire est de coder notre propre «retard" méthode. Nous utiliserons le setTimeout () fonction et promettre de nous aider à créer le «retard«Méthode comme:
Nous allons simplement créer une fonction avec le nom de «retard» et lui passer du temps en millisecondes. Cette fonction «retard» renvoie une promesse et ne laissera pas l'exécution continuer jusqu'à ce que la promesse soit résolue.
Fonction Delay (ms)retourner la nouvelle promesse (résolution => setTimeout (résolution, ms));
Maintenant, nous appelons cette fonction «retard» avec une «.alors »Opérateur. Comme ça:
console.log ("bonjour");Delay (2000).alors (() => console.journal ("monde!"););
La sortie serait:
Nous créons une promesse et setTimeout () Méthode avec un peu de retard pour résoudre le promesse. Vous pouvez en savoir plus sur les promesses JavaScript.
Au cas où vous souhaitez vous débarrasser de la .alors() Méthode, et pour enchaîner les retards, ce que nous pouvons faire est d'utiliser asynchrone et attendre avec notre fonction «retard».
Demo de fonction asynchrone ()console.log ("c'est un");
attendre un retard (1000);
console.log ("LinuxHint");
attendre un retard (1000);
console.journal ("tutoriel!");
Remarque: nous devons ajouter le asynchrone mot-clé avec la fonction qui appelle le retard() méthode. Si nous exécutons le programme, ce que nous obtenons est le suivant:
En venant à notre problème, l'imprimante numéro de 1 à 10, nous devons la créer dans une fonction asynchrone et appeler la méthode «retard» que nous venons de créer comme:
fonction async nombrepriter ()pour (soit i = 1; i <= 10; i++)
console.journal (i);
attendre le retard (1000)
Et nous devons appeler cette fonction avec:
NumberPinter ();La sortie que nous obtenons avec ceci est:
C'est tout pour notre fonction «retard».
Conclusion
Il n'y a pas attendez, retard, ou une fonction de sommeil en javascript, mais nous pouvons utiliser le setTimeout () Méthode pour imiter le comportement de retard et nous pouvons même coder le nôtre retard() Méthode pour créer un retard dans l'exécution du programme. Nous avons appris comment setTimeout () La méthode fonctionne, comment il est courant de mal comprendre son travail et son utilisation. De plus, nous avons appris à combiner la méthode setTimeout () avec promesses Pour créer notre propre méthode de retard, et nous avons également appris à utiliser asynchrone et attendre sur notre fonction pour attendre, puis continuer l'exécution.