JavaScript Callbacks
“ฉันจะโทรกลับทีหลัง!”
การเรียกกลับเป็นฟังก์ชันที่ส่งผ่านเป็นอาร์กิวเมนต์ไปยังฟังก์ชันอื่น
เทคนิคนี้อนุญาตให้ฟังก์ชันเรียกใช้ฟังก์ชันอื่นได้
ฟังก์ชันเรียกกลับสามารถทำงานหลังจากฟังก์ชันอื่นเสร็จสิ้นแล้ว
ลำดับฟังก์ชัน
ฟังก์ชัน JavaScript ทำงานตามลำดับที่เรียกว่า ไม่อยู่ในลำดับที่กำหนดไว้
ตัวอย่างนี้จะแสดงคำว่า "ลาก่อน":
ตัวอย่าง
function myFirst() {
myDisplayer("Hello");
}
function
mySecond() {
myDisplayer("Goodbye");
}
myFirst();
mySecond();
ตัวอย่างนี้จะแสดง "สวัสดี":
ตัวอย่าง
function myFirst() {
myDisplayer("Hello");
}
function
mySecond() {
myDisplayer("Goodbye");
}
mySecond();
myFirst();
การควบคุมลำดับ
บางครั้งคุณต้องการควบคุมเวลาที่จะเรียกใช้ฟังก์ชันได้ดีขึ้น
สมมติว่าคุณต้องการทำการคำนวณ แล้วแสดงผล
คุณสามารถเรียกใช้ฟังก์ชันเครื่องคิดเลข ( myCalculator
) บันทึกผลลัพธ์ จากนั้นเรียกใช้ฟังก์ชันอื่น ( myDisplayer
) เพื่อแสดงผลลัพธ์:
ตัวอย่าง
function myDisplayer(some) {
document.getElementById("demo").innerHTML = some;
}
function myCalculator(num1, num2) {
let sum = num1 + num2;
return sum;
}
let result = myCalculator(5, 5);
myDisplayer(result);
หรือคุณอาจเรียกใช้ฟังก์ชันเครื่องคิดเลข ( myCalculator
) และให้ฟังก์ชันเครื่องคิดเลขเรียกใช้ฟังก์ชันการแสดงผล ( myDisplayer
):
ตัวอย่าง
function myDisplayer(some) {
document.getElementById("demo").innerHTML
= some;
}
function myCalculator(num1, num2) {
let sum = num1 + num2;
myDisplayer(sum);
}
myCalculator(5, 5);
ปัญหาของตัวอย่างแรกข้างต้นคือ คุณต้องเรียกใช้ฟังก์ชันสองฟังก์ชันเพื่อแสดงผลลัพธ์
ปัญหาของตัวอย่างที่สองคือ คุณไม่สามารถป้องกันฟังก์ชันเครื่องคิดเลขไม่ให้แสดงผลได้
ตอนนี้ได้เวลาโทรกลับแล้ว
JavaScript Callbacks
การเรียกกลับเป็นฟังก์ชันที่ส่งผ่านเป็นอาร์กิวเมนต์ไปยังฟังก์ชันอื่น
เมื่อใช้การเรียกกลับ คุณสามารถเรียกใช้ฟังก์ชันเครื่องคิดเลข ( myCalculator
) ด้วยการเรียกกลับ และให้ฟังก์ชันเครื่องคิดเลขเรียกใช้การเรียกกลับหลังจากการคำนวณเสร็จสิ้น:
ตัวอย่าง
function myDisplayer(some) {
document.getElementById("demo").innerHTML
= some;
}
function myCalculator(num1, num2, myCallback) {
let sum = num1 + num2;
myCallback(sum);
}
myCalculator(5, 5, myDisplayer);
ในตัวอย่างข้างต้นmyDisplayer
เป็นชื่อของฟังก์ชัน
มันถูกส่งผ่านไปmyCalculator()
เป็นอาร์กิวเมนต์
เมื่อคุณส่งฟังก์ชันเป็นอาร์กิวเมนต์ อย่าลืมใช้วงเล็บ
ขวา: myCalculator(5, 5, myDisplayer);
ผิด: myCalculator(5, 5, myDisplayer());
เมื่อใดควรใช้โทรกลับ
ตัวอย่างข้างต้นไม่น่าตื่นเต้นนัก
สิ่งเหล่านี้จะง่ายขึ้นเพื่อสอนไวยากรณ์การโทรกลับ
ที่ซึ่งการเรียกกลับเปล่งประกายอยู่ในฟังก์ชันแบบอะซิงโครนัส โดยที่ฟังก์ชันหนึ่งต้องรอฟังก์ชันอื่น (เช่น รอให้ไฟล์โหลด)
ฟังก์ชันอะซิงโครนัสจะกล่าวถึงในบทต่อไป