Asynchrone code met callbacks in JavaScript

Stel dat we een bepaalde asynchrone functie hebben:

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

Stel dat we deze functie als volgt gebruiken:

make();
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:

make(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:

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

Leg uit in welke volgorde de getallen in de console worden weergegeven:

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

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