Async JavaScript

Callback คืออะไร

callback คือ function ที่เราส่งเข้าไปให้ function อื่นเรียกทีหลัง ใช้บ่อยเมื่อโค้ดบางอย่างยังไม่ควรทำทันที เช่น รอให้ผู้ใช้กดปุ่ม รอ timer หรือรอผลลัพธ์จากงานที่ใช้เวลา แนวคิดสำคัญคือ เราไม่ได้เรียก callback เองทันทีเสมอไป แต่ส่ง function ไว้ให้เจ้าของงานเป็นคนเรียกเมื่อถึงเวลาที่เหมาะสม

function runTask(taskName, done) {
  console.log("เริ่ม:", taskName);
  done(taskName + " เสร็จแล้ว");
}

runTask("ตรวจคำตอบ", function (message) {
  console.log(message);
});

// output:
// เริ่ม: ตรวจคำตอบ
// ตรวจคำตอบ เสร็จแล้ว

ใช้ callback เมื่อไหร่

• เมื่อต้องการให้ผู้ใช้โค้ดกำหนดสิ่งที่จะทำต่อเอง
• เมื่องานเกิดทีหลัง เช่น click, timer, หรือผลลัพธ์จากระบบอื่น
• เมื่ออยากแยก function หลักออกจากรายละเอียดหลังงานเสร็จ

console.log("ก่อนรอ");

setTimeout(function () {
  console.log("รอครบ 1 วินาทีแล้ว");
}, 1000);

console.log("หลังตั้งเวลา");

// output ทันที:
// ก่อนรอ
// หลังตั้งเวลา
// แล้วอีกประมาณ 1 วินาที:
// รอครบ 1 วินาทีแล้ว

สิ่งที่ต้องระวัง

Lab 1: เรียก callback พร้อมผลลัพธ์