ทำความเข้าใจกับการโทรกลับใน JavaScript
Callback คือฟังก์ชันที่ถูกส่งผ่านเป็นอาร์กิวเมนต์ไปยังฟังก์ชันอื่นๆ และจะดำเนินการในภายหลัง พวกมันอนุญาตให้คุณรันโค้ดบางส่วน ณ จุดใดจุดหนึ่งในการทำงานของฟังก์ชันอื่น โดยไม่ต้องทราบเวลาหรือตำแหน่งที่แน่นอนของโค้ดนั้น ใน JavaScript การเรียกกลับมักใช้เพื่อจัดการการดำเนินการแบบอะซิงโครนัส เช่น การสร้าง HTTP ขอหรือตั้งเวลา ฟังก์ชันเรียกกลับถูกส่งผ่านเป็นอาร์กิวเมนต์ไปยังฟังก์ชันหลัก และจะดำเนินการเมื่อการดำเนินการแบบอะซิงโครนัสเสร็จสมบูรณ์
นี่คือตัวอย่างของการใช้ฟังก์ชันเรียกกลับใน JavaScript:
```
function makeRequest(callback) {
// Make an คำขอ HTTP ที่นี่
// ...
callback();
}
makeRequest(function() {
console.log("Request complete");
});
```
ในตัวอย่างนี้ ฟังก์ชัน `makeRequest` จะใช้ ฟังก์ชันการโทรกลับเป็นอาร์กิวเมนต์ และเรียกใช้ฟังก์ชันนั้นเมื่อคำขอ HTTP เสร็จสมบูรณ์ ฟังก์ชันการโทรกลับจะถูกส่งผ่านเป็นอาร์กิวเมนต์ไปยังฟังก์ชัน `makeRequest` และจะดำเนินการเมื่อคำขอเสร็จสมบูรณ์ นอกจากนี้การโทรกลับยังสามารถใช้ร่วมกับสัญญา ซึ่งช่วยให้คุณจัดการการดำเนินการแบบอะซิงโครนัสในลักษณะที่มีโครงสร้างมากขึ้น นี่คือตัวอย่างการใช้ฟังก์ชัน callback พร้อมpromise:
```
function makeRequest(callback) {
// Make an HTTP request here
// ...
Promise.resolve().then(callback);
}
makeRequest(function() {
console.log("Request complete");
});
```
ในตัวอย่างนี้ ฟังก์ชัน `makeRequest` จะส่งคืนสัญญา ซึ่งจากนั้นจะได้รับการแก้ไขด้วยฟังก์ชันเรียกกลับ ฟังก์ชันการโทรกลับจะดำเนินการเมื่อสัญญาได้รับการแก้ไข ซึ่งเป็นเมื่อคำขอ HTTP เสร็จสมบูรณ์ นอกจากนี้การโทรกลับยังสามารถใช้กับเหตุการณ์ต่างๆ เช่น การคลิกเมาส์หรือการกดปุ่ม นี่คือตัวอย่างของการใช้ฟังก์ชันเรียกกลับกับตัวฟังเหตุการณ์:
```
document.getElementById("myButton").addEventListener("click", function() {
console.log("Button clicked");
} );
```
ในตัวอย่างนี้ เมธอด `addEventListener` ถูกเรียกใช้บนองค์ประกอบปุ่ม HTML และส่งฟังก์ชันการโทรกลับเป็นอาร์กิวเมนต์ เมื่อคลิกปุ่ม ฟังก์ชันโทรกลับจะถูกดำเนินการ และบันทึกข้อความไปยังคอนโซล