Callback Function คือ ฟังก์ชันที่ถูกส่งเป็น อาร์กิวเมนต์ ให้ฟังก์ชันอื่น และถูก เรียกใช้ภายใน ฟังก์ชันนั้น (มักจะเป็น Asynchronous)
ตัวอย่างพื้นฐาน
<html>
<head>
<script>
var callback = function(myCallback) {
setTimeout(function() {
myCallback(); // เรียก callback หลัง 5 วินาที
}, 5000);
};
document.write("First is displayed");
document.write("<br>Second is displayed");
callback(function() {
document.write("This is Callback function");
});
document.write("<br>Last is displayed");
</script>
</head>
</html>
ลำดับการทำงาน
First is displayed Second is displayed Last is displayed (รอ 5 วินาที) This is Callback function
รูปแบบ Callback Patterns
1. Synchronous Callback
[1, 2, 3].forEach(function(item) {
console.log(item); // เรียกทันทีแบบ synchronous
});
2. Asynchronous Callback (Node.js Style - Error-first)
fs.readFile('file.txt', 'utf8', function(err, data) {
if (err) return console.error(err);
console.log(data);
});
3. Promise-based (Modern)
fetchData() .then(data => console.log(data)) .catch(err => console.error(err));
4. Async/Await (ES2017)
async function handleData() {
try {
const data = await fetchData();
console.log(data);
} catch (err) {
console.error(err);
}
}
ปัญหา Callback Hell
doStep1(function() {
doStep2(function() {
doStep3(function() {
// น่ากลัว...
});
});
});
แก้ด้วย: Promises, Async/Await, หรือ Modularize โค้ด
Callback ใน Built-in Methods
- Array:
forEach, map, filter, reduce, find, sort - String:
replace(with function) - Timer:
setTimeout, setInterval - Event:
addEventListener
