JavaScript Callback Functions - Callbacks ใน JS คืออะไรและใช้อย่างไร

หากคุณคุ้นเคยกับการเขียนโปรแกรมคุณก็รู้อยู่แล้วว่ามีฟังก์ชันอะไรบ้างและใช้งานอย่างไร แต่ฟังก์ชันโทรกลับคืออะไร? ฟังก์ชันการโทรกลับเป็นส่วนสำคัญของ JavaScript และเมื่อคุณเข้าใจว่าการโทรกลับทำงานอย่างไรคุณจะเก่งขึ้นมากใน JavaScript

ดังนั้นในโพสต์นี้ฉันอยากจะช่วยให้คุณเข้าใจว่าฟังก์ชันการโทรกลับคืออะไรและวิธีการใช้งานใน JavaScript โดยดูตัวอย่างบางส่วน

Callback Function คืออะไร?

ใน JavaScript ฟังก์ชันคือวัตถุ เราสามารถส่งผ่านวัตถุไปยังฟังก์ชันเป็นพารามิเตอร์ได้หรือไม่? ใช่.

ดังนั้นเรายังสามารถส่งผ่านฟังก์ชันเป็นพารามิเตอร์ไปยังฟังก์ชันอื่น ๆ และเรียกใช้ฟังก์ชันเหล่านั้นภายในฟังก์ชันภายนอก ฟังดูซับซ้อน? ให้ฉันแสดงในตัวอย่างด้านล่าง:

function print(callback) { callback(); }

ฟังก์ชัน print () ใช้ฟังก์ชันอื่นเป็นพารามิเตอร์และเรียกใช้ฟังก์ชันภายใน สิ่งนี้ใช้ได้ใน JavaScript และเราเรียกมันว่า "โทรกลับ" ดังนั้นฟังก์ชันที่ส่งผ่านไปยังฟังก์ชันอื่นเป็นพารามิเตอร์คือฟังก์ชันเรียกกลับ แต่นั่นไม่ใช่ทั้งหมด

คุณยังสามารถดูเวอร์ชันวิดีโอของฟังก์ชันโทรกลับด้านล่าง:

ทำไมเราถึงต้องการฟังก์ชันการโทรกลับ

JavaScript รันโค้ดตามลำดับตามลำดับจากบนลงล่าง อย่างไรก็ตามมีบางกรณีที่โค้ดทำงาน (หรือต้องรัน) หลังจากมีสิ่งอื่นเกิดขึ้นและไม่เรียงตามลำดับ สิ่งนี้เรียกว่าการเขียนโปรแกรมแบบอะซิงโครนัส

การโทรกลับตรวจสอบให้แน่ใจว่าฟังก์ชันจะไม่ทำงานก่อนที่งานจะเสร็จสมบูรณ์ แต่จะทำงานทันทีหลังจากงานเสร็จสิ้น ช่วยให้เราพัฒนาโค้ด JavaScript แบบอะซิงโครนัสและช่วยให้เราปลอดภัยจากปัญหาและข้อผิดพลาด

ใน JavaScript วิธีสร้างฟังก์ชันเรียกกลับคือการส่งต่อเป็นพารามิเตอร์ไปยังฟังก์ชันอื่นจากนั้นเรียกกลับทันทีหลังจากเกิดเหตุการณ์หรืองานบางอย่างเสร็จสิ้น มาดูวิธี…

วิธีสร้างการโทรกลับ

เพื่อให้เข้าใจสิ่งที่ฉันได้อธิบายไว้ข้างต้นให้ฉันเริ่มด้วยตัวอย่างง่ายๆ เราต้องการบันทึกข้อความไปที่คอนโซล แต่ควรจะอยู่ที่นั่นหลังจาก 3 วินาที

const message = function() { console.log("This message is shown after 3 seconds"); } setTimeout(message, 3000);

มีเมธอดในตัวใน JavaScript ที่เรียกว่า "setTimeout" ซึ่งเรียกใช้ฟังก์ชันหรือประเมินนิพจน์หลังจากช่วงเวลาที่กำหนด (ในหน่วยมิลลิวินาที) ดังนั้นที่นี่ฟังก์ชัน "ข้อความ" จะถูกเรียกใช้หลังจาก 3 วินาทีผ่านไป (1 วินาที = 1,000 มิลลิวินาที)

กล่าวอีกนัยหนึ่งฟังก์ชันข้อความจะถูกเรียกใช้หลังจากมีบางสิ่งเกิดขึ้น (หลังจากผ่านไป 3 วินาทีสำหรับตัวอย่างนี้) แต่ไม่ใช่ก่อน ดังนั้นฟังก์ชันข้อความจึงเป็นตัวอย่างของฟังก์ชันเรียกกลับ

Anonymous Function คืออะไร?

หรือเราสามารถกำหนดฟังก์ชันโดยตรงภายในฟังก์ชันอื่นแทนการเรียกใช้ฟังก์ชันนั้น จะมีลักษณะดังนี้:

setTimeout(function() { console.log("This message is shown after 3 seconds"); }, 3000);

อย่างที่เราเห็นฟังก์ชันเรียกกลับที่นี่ไม่มีชื่อและคำจำกัดความของฟังก์ชันที่ไม่มีชื่อใน JavaScript เรียกว่า "ฟังก์ชันไม่ระบุชื่อ" การดำเนินการนี้จะเหมือนกับตัวอย่างด้านบน

โทรกลับเป็นฟังก์ชันลูกศร

หากคุณต้องการคุณสามารถเขียนฟังก์ชันเรียกกลับแบบเดียวกับฟังก์ชันลูกศร ES6 ซึ่งเป็นฟังก์ชันประเภทใหม่ใน JavaScript:

setTimeout(() => { console.log("This message is shown after 3 seconds"); }, 3000);

แล้วกิจกรรมล่ะ?

JavaScript เป็นภาษาโปรแกรมที่ขับเคลื่อนด้วยเหตุการณ์ เรายังใช้ฟังก์ชันการโทรกลับสำหรับการประกาศเหตุการณ์ ตัวอย่างเช่นสมมติว่าเราต้องการให้ผู้ใช้คลิกปุ่ม:

Click here

คราวนี้เราจะเห็นข้อความบนคอนโซลก็ต่อเมื่อผู้ใช้คลิกที่ปุ่ม:

document.queryselector("#callback-btn") .addEventListener("click", function() { console.log("User has clicked on the button!"); });

ที่นี่เราจึงเลือกปุ่มก่อนด้วย id จากนั้นเพิ่มตัวฟังเหตุการณ์ด้วยเมธอด addEventListener ต้องใช้ 2 พารามิเตอร์ ตัวแรกคือประเภท "คลิก" และพารามิเตอร์ที่สองคือฟังก์ชันเรียกกลับซึ่งจะบันทึกข้อความเมื่อคลิกปุ่ม

อย่างที่คุณเห็นฟังก์ชันการโทรกลับยังใช้สำหรับการประกาศเหตุการณ์ใน JavaScript

สรุป

การโทรกลับมักใช้ใน JavaScript และฉันหวังว่าโพสต์นี้จะช่วยให้คุณเข้าใจสิ่งที่พวกเขาทำจริงและวิธีการทำงานกับมันง่ายขึ้น จากนั้นคุณสามารถเรียนรู้เกี่ยวกับ JavaScript Promises ซึ่งเป็นหัวข้อเดียวกันกับที่ฉันได้อธิบายไว้ในโพสต์ใหม่ของฉัน

หากคุณต้องการเรียนรู้เพิ่มเติมเกี่ยวกับการพัฒนาเว็บไซต์อย่าลังเลที่จะติดตามฉันบน Youtube !

ขอบคุณสำหรับการอ่าน!