Asynchrone code met callbacks in JavaScript

Stel dat we een bepaalde asynchrone functie hebben:

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

Stel dat we deze functie als volgt gebruiken:

javascriptmake();
console.log('2'); // wordt als eerste uitgevoerd

Stel dat we willen dat de tweede console.log wordt uitgevoerd nadat de asynchrone bewerking binnen de functie is voltooid. Een van de benaderingen die hiervoor wordt gebruikt, is het gebruik van een callback: we wikkelen de wachtende code in een anonieme functie en geven deze door als parameter aan de functie make:

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

Op zichzelf lost dit natuurlijk ons probleem niet op. Tot nu toe hebben we alleen maar de volgende afspraak gemaakt: als je code wilt uitvoeren na het activeren van make, geef deze code dan door als callback in de aanroep van make.

Laten we de code van de functie make aanpassen, zodat deze gaat werken volgens onze afspraak:

javascriptfunction make(callback) {
  setTimeout(function() {
    console.log('1'); // een of andere asynchrone bewerking, misschien niet slechts één
    callback();       // dan onze callback
  }, 3000);
}

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

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