Attendez X secondes en JavaScript

1. Utilisez la fonction setTimeout() pour attendre X secondes en JavaScript
2. Utilisez promises et async/await pour attendre X secondes en JavaScript
3. Utiliser la boucle for pour implémenter la fonction delay synchrone en JavaScript

Ce tutoriel expliquera comment nous pouvons attendre x secondes avant de poursuivre l’exécution en JavaScript. Nous implémenterons une fonction delay(seconds) qui bloquera le fil pendant x secondes. Nous expliquerons également plusieurs techniques d’implémentation pour ce délai.

Lorsque nous parlons d’implémenter une fonction de delay, la méthode la plus utilisée est la méthode asynchrone setTimeout().

Utilisez la fonction setTimeout() pour attendre X secondes en JavaScript

La méthode asynchrone setTimeout() est l’une des fonctions d’ordre supérieur qui prend une fonction de rappel en argument, et elle exécute cette fonction après que le temps d’entrée se soit écoulé. Le temps donné dans le paramètre est dans l’unité de ms.

console.log('I am the first log');

setTimeout(function() {
  console.log('I am the third log after 5 seconds');
}, 5000);

console.log('I am the second log');

Production :

I am the first log
I am the second log
I am the third log after 5 seconds

Utilisez promises et async/await pour attendre X secondes en JavaScript

Une méthode pour mettre en œuvre la fonction de délai dans le contexte asynchrone consiste à combiner le concept async/await et le concept promises. Nous pouvons créer une fonction de délai qui retourne une nouvelle promises à l’intérieur, que nous appellerons la méthode setTimeout() avec le temps d’attente souhaité. Ensuite, nous pouvons appeler cette fonction delay dans le contexte asynchrone de notre choix.

function delay(n) {
  return new Promise(function(resolve) {
    setTimeout(resolve, n * 1000);
  });
}

async function myAsyncFunction() {
  // Do what you want here
  console.log('Before the delay')

      await delay(5);

  console.log('After the delay')
  // Do what you want here too
}

myAsyncFunction();

Production :

Before the delay
After the delay

La fonction de délai peut également être optimisée en utilisant la syntaxe des flèches dans l’ECMAScript 6, comme dans l’exemple suivant :

const delay = (n) => new Promise(r => setTimeout(r, n * 1000));

Utiliser la boucle for pour implémenter la fonction delay synchrone en JavaScript

Supposons que nous n’avons pas de contexte asynchrone pour utiliser la fonction delay() ci-dessus ou que nous ne voulons pas utiliser la fonction setTimeout(). Dans ce cas, nous pouvons implémenter une fonction de délai synchrone avec une boucle for normale et la classe Date() pour calculer le temps.

L’implémentation de cette fonction est assez simple. Il s’agit de maintenir le CPU occupé pendant la durée souhaitée. Cela se fait en calculant le temps écoulé et en le comparant au temps d’attente afin de pouvoir continuer l’exécution après celui-ci.

function syncDelay(milliseconds) {
  var start = new Date().getTime();
  var end = 0;
  while ((end - start) < milliseconds) {
    end = new Date().getTime();
  }
}

console.log('Before the delay')
syncDelay(5000);
console.log('After the delay')

Production :

Before the delay
After the delay