Javascript : l'asynchrone

Introduction Introduction

Le langage Javascript permet de travailler de manière asynchrone, cela signifie que l’on va travailler avec éléments qui ne vont pas forcément répondre dans l’ordre avec lequel ils ont été appelés. Les Timers sont une bonne entrée en matière pour comprendre le concept.

Synchrone vs asynchrone Synchrone vs asynchrone

Créer une fonction d’attente synchrone Créer une fonction d’attente synchrone

function sleep(milliseconds) {
  const date = Date.now();
  let currentDate = null;
  do {
    currentDate = Date.now();
  } while (currentDate - date < milliseconds);
}

console.log('first call');
sleep(2000);
console.log('second call');
console.log('third call');

Dans cet exemple, on temporise l’exécution du second console.log en exécutant notre fonction d’attente entre deux. Nous obtenons bien une temporisation mais de manière itérative, on est obligé d’attendre pour passer à la suite.

Créer une fonction d’attente asynchrone Créer une fonction d’attente asynchrone

function wait(duration, message) {
  setTimeout(() => {
    console.log(message);
  }, duration);
}

console.log('first call');
wait(2000, 'second call');
console.log('third call');

Dans cette version, on utilise un setTimeout pour créer notre fonction de temporisation. La méthode setTimeout de Javascript permet de créer une temporisation d’exécution sur une fonction. Pour cela, il suffit d’entourer votre fonction à exécuter d’un setTimeout. Il prend en second paramètre un délai en milliseconde.

Voir la documentation du setTimeout

Cette fois-ci, le troisième console.log est exécuté avant que ne soit terminée la temporisation du second console.log.

Garder l'ordre d'exécution Garder l'ordre d'exécution

Si l’on souhaite enchainer l’exécution de plusieurs fonctions asynchrone tout en conservant l’ordre d’exécution, nous allons devoir utiliser de système de callbacks.

Les fonctions de callbacks Les fonctions de callbacks

Les fonctions de callback sont des fonctions qui sont passées en paramètre d’une autre fonction et elle est exécutée dans la fonction parente.

function chainedAsyncLog() {
  setTimeout(() => {
    console.log('first call');
    setTimeout(() => {
      console.log('second call');
      setTimeout(() => {
        console.log('third call');
      }, 1000);
    }, 1000);
  }, 1000);
}
chainedAsyncLog();

De cette manière, on s’assure de l’ordre d’exécution des fonctions asynchrone. L’inconvénient princpale de ce pattern est la lisibilité du code (Callback Hell). Heureusement, Javascipt implémente d’autres fonctionnalités qui permettent de gérer cela de manière beaucoup plus lisible : Les Promesses.