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

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

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

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

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

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

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

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

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

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

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

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