การเรียกใช้ฟังก์ชัน Callback JavaScript

"I will call back later!"

รีบความ (callback) เป็นฟังก์ชันที่ถูกส่งผ่านเป็นตัวอุปกรณ์แก่ฟังก์ชันอื่น

เทคนิคนี้อนุญาตให้ฟังก์ชันเรียกฟังก์ชันอื่น

ฟังก์ชันรีบความสามารถทำงานหลังจากฟังก์ชันอื่นเสร็จงาน

ลำดับฟังก์ชัน

ฟังก์ชัน JavaScript จะทำงานตามลำดับที่ถูกเรียก ไม่ใช่ตามลำดับที่ถูกเรียก

ตัวอย่างนี้จะแสดง "Goodbye":

ตัวอย่าง

function myFirst() {
  myDisplayer("Hello");
}
function mySecond() {
  myDisplayer("Goodbye");
}
myFirst();
mySecond();

ลองทดลองด้วยตัวเอง

ตัวอย่างนี้จะแสดง "Hello":

ตัวอย่าง

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);

ลองทดลองด้วยตัวเอง

ปัญหาของตัวอย่างแรกคือคุณต้องเรียกฟังก์ชันสองฟังก์ชันเพื่อแสดงผล

ปัญหาของตัวอย่างที่สองคือคุณไม่สามารถหยุดหน่วยงานฟังก์ชันคำนวณแสดงผลได้

ตอนนี้เป็นเวลาที่ควรนำรีบความเข้ามาใช้

การเรียกใช้ฟังก์ชัน Callback JavaScript

รีบความเป็นฟังก์ชันที่ถูกส่งผ่านเป็นตัวอุปกรณ์แก่ฟังก์ชันอื่น

ด้วยรีบความ คุณสามารถเรียกฟังก์ชันคำนวณผ่านรีบความ (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());

เมื่อใดจึงใช้คลาสส์แบ็คคอลล์?

ตัวอย่างดังกล่าวไม่ได้น่าน่าสนใจมากนัก

เราทำให้มันเรียบง่ายขึ้น เพื่อให้คุณเข้าใจศัพท์คำของคลาสส์แบ็คคอลล์

ความที่เด่นของการใช้คลาสส์แบ็คคอลล์เกี่ยวกับฟังก์ชันทำงานอย่างไม่มีสัญญา คือฟังก์ชันหนึ่งต้องรอฟังก์ชันอื่น (เช่น รอการโหลดไฟล์)

บทที่ต่อไปจะนำเสนอเรื่องฟังก์ชันทำงานอย่างไม่มีสัญญา