รหัสอะซิงโครนัสกับคอลแบ็กใน JavaScript

สมมติว่าเรามีฟังก์ชันอะซิงโครนัสอยู่หนึ่งฟังก์ชัน:

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

สมมติว่าเราใช้ฟังก์ชันนี้ดังต่อไปนี้:

make();
console.log('2'); // จะถูกดำเนินการก่อน

สมมติว่าเราต้องการทำให้การแสดงผลครั้งที่สองในคอนโซลถูกดำเนินการหลังจากที่การดำเนินการอะซิงโครนัสภายในฟังก์ชันเสร็จสิ้น หนึ่งในแนวทางที่ใช้สำหรับสิ่งนี้คือการใช้ คอลแบ็ก: ให้เราห่อหุ้มโค้ดที่ต้องการรอไว้ในฟังก์ชันนิรนามและส่งผ่านเป็นพารามิเตอร์ไปยังฟังก์ชัน make:

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

แน่นอนว่าเพียงแค่นี้ยังแก้ปัญหาเราไม่ได้ เรากำลังทำข้อตกลงดังนี้: หากต้องการดำเนินการโค้ดหลังจากที่ make ทำงานเสร็จ ให้ส่งโค้ดนั้นมาเป็นคอลแบ็กในการเรียกใช้ make

มาแก้ไขโค้ดของฟังก์ชัน make เพื่อให้มันเริ่มทำงานตามข้อตกลงของเรา:

function make(callback) {
	setTimeout(function() {
		console.log('1'); // การดำเนินการอะซิงโครนัสบางอย่าง อาจมีมากกว่าหนึ่ง
		callback();       // จากนั้นคอลแบ็กของเรา
	}, 3000);
}

บอกมาสิว่าตัวเลขจะถูกแสดงผลในคอนโซลตามลำดับใด:

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

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