Code asynchrone avec callbacks en JavaScript

Supposons que nous ayons une fonction asynchrone :

javascriptfunction make() {
  setTimeout(function() {
    console.log('1');
  }, 3000);
}

Supposons que nous utilisons cette fonction de la manière suivante :

javascriptmake();
console.log('2'); // s'exécutera en premier

Supposons que nous voulions faire en sorte que la seconde sortie dans la console s'exécute après que l'opération asynchrone à l'intérieur de la fonction soit terminée. L'une des approches utilisées pour cela est l'utilisation d'un callback : enveloppons le code à attendre dans une fonction anonyme et passons-la en paramètre à la fonction make :

javascriptmake(function() {
  console.log('2');
});

Bien sûr, cela ne résoudra pas notre problème tel quel. Pour l'instant, nous avons simplement conclu l'accord suivant : si vous souhaitez exécuter du code après le déclenchement de make, passez ce code comme callback dans l'appel de make.

Corrigeons le code de la fonction make afin qu'elle commence à fonctionner conformément à notre accord :

javascriptfunction make(callback) {
  setTimeout(function() {
    console.log('1'); // une opération asynchrone, peut-être pas une seule
    callback();       // puis notre callback
  }, 3000);
}

javascriptfunction make(callback) {
  setTimeout(function() {
    console.log('1');
    callback();
  }, 3000);
}

make(function() {
  console.log('2');
  console.log('3');
});