ทำความเข้าใจเรื่องของ Callback Function ใน JavaScript

Patiphan Phengpao — Thu, 13 Aug 2020 04:19:15 +0000

สวัสดีครับทุกคน ผมปฏิภาณ ยินดีต้อนรับเข้าสู่ MilerDev Blog วันนี้เราจะพามารู้จักกับ Callback function และทำความเข้าใจกันว่ามันคืออะไรแล้วทำงานอย่างไรครับ

ในบทความนี้ทุกคนต้องมีพื้นฐาน programming มาบ้างและรู้ว่า function คืออะไรและใช้งานอย่างไร คราวมานี้เรามาดูกันเลยครับว่า Callback function คืออะไร

Callback function เป็นส่วนที่สำคัญอย่างมากในการเขียน javascript และเมื่อเราเข้าใจ ว่า callback มันทำงานอย่างไร เราจะเริ่มเขียน javascript ได้ดีขึ้น

Callback Function คือะไร ?

ใน JavaScript, function ก็คือ objects แล้วเราสามารถจะส่ง objects ไปเป็น parameters ของ functions ตัวอื่นได้ไหม ? คำตอบคือได้ครับ

ดังนั้นเราสามารถที่จะส่ง functions ไปเป็น parameters ของ functions ตัวอื่น และสามารถเรียกใช้งานมันภายใน functions นั้นได้ อาจจะยังไม่เห็นภาพ มาดูตัวอย่าง

ฟังก์ชั่น print() ตัวนี้ จะรับเอา function ตัวอื่น (callback) มาเป็น parameter และเรียกใช้งานมันภายใน และเราก็จะเรียกมันว่า "callback" ดังนั้น function ที่ถูกส่งไปเป็น parameter ให้ function อีกตัว ก็คือ callback function แต่นั่นยังไม่ใช่ทั้งหมด

ทำไมเราต้องมี Callback Functions ล่ะ ?

ในภาษา javascript นั้น โค้ดจะทำงานตามลำดับจากบนลงล่าง ซึ่งมันก็อาจจะมีบางครั้งที่โค้ดของเราอาจจะต้องทำงานหลังจากมีบางอย่างเกิดขึ้นและไม่จำเป็นต้องทำตามลำดับ ซึ่งนี้จะเรียกว่า " asynchronous programming "

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

ใน JavaScript วิธีที่จะสร้าง callback function ก็คือการส่งไปเป็น parameter ให้กับ function ตัวอื่นๆ แล้วจากนั้นก็ทำการเรียกใช้มันหลังจากที่มีบางอย่างเกิดขึ้น หรือ task การทำงานบางอย่างเสร็จสมบูรณ์ มาดูกันต่อว่าทำอย่างไร...

การสร้าง Callback

เพื่อให้ทุกคนได้เข้าใจการทำงานของมันมากขึ้น จากที่กล่าวไปด้านบน มาดูตัวอย่างนี้กันครับ ซึ่งผมต้องการที่จะแสดงของความหรือ log a message ที่ console แต่มันควรทำงานหลังจาก 3 วิ

ซึ่งมันจะมีฟังก์ชั่น หรือ built-in method ใน javascript ที่เรียกว่า "setTimeout" ซึ่งจะเรียก function หลังจากที่เราได้กำหนดเวลาไว้ (เป็นวินาที) ดังนั้นฟังก์ชั่น "message" จะถูกเรียกหลังจากผ่านไป 3 วินาที (1 second = 1000 milliseconds)

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

อะไรคือ Anonymous Function ?

เราสามารถกำหนด function ได้โดยตรงภายในอีก function หนึ่งได้ แทนที่จะเรียกมัน ซึ่งหน้าตาจะเป็นแบบนี้ครับ

อย่างที่ทุกคนเห็นครับ callback function ที่เราเห็นอยู่นี้ ไม่มีชื่อ ซึ่งใน JavaScript จะเรียกมันว่า "Anonymous Function" ซึ่งการทำงานของมันจะเหมือนกับตัวอย่างด้านบนเลยครับ

Callback กับ Arrow Function

ถ้าเราอยากใช้ callback กับ arrow function เราสามารถเขียน callback function กับ arrow function ได้ครับ จะได้หน้าตาแบบนี้

แล้วการใช้ Callback กับ Events ล่ะ ?

JavaScript เป็น event-driven programming language หรือก็คือเป็นภาษาที่ถูกกำหนดการทำงานโดยเหตุการณ์การกระทำของ user อย่างเช่น การ click หรือ การกดปุ่ม เป็นต้น

เราสามารถใช้ callback functions สำหรับ event declartions (การประกาศเหตุการณ์) ยกตัวอย่างเช่น เราต้องการให้ user กด click ที่ button ก็ให้เราสร้างปุ่มขึ้นมาครับ

คราวนี้เราต้องการที่จะให้มันแสดงข้อความที่ console เมื่อ user มีการกด click ที่ปุ่ม

อันดับแรกก็ให้เราสร้างตัวแปล callbackBtn จากนั้นก็ get id #callback-btn มา จากนั้นเราก็ทำการเพิ่ม event listener ด้วยฟังก์ชั่น addEventListener() ซึ่งก็จะมีการรับ parameters 2 ตัว ตัวแรกก็คือ ชนิดของ event ในตัวอย่างนี้ก็คือจะเป็น event click ครับ และอันที่สอง ก็จะเป็น parameter ของ callback function ซึ่งจะทำหน้าที่ log message หรือแสดงข้อความออกมาจาก console เมื่อ button ถูก click นั่นเองครับผม

ตามที่เราเห็น ก็จะเห็นได้ว่า callback functions สามารถใช้กับ event ใน javascript ได้ด้วยครับผม

สรุป (Wrap up)

Callbacks เป็นสิ่งที่ใช้บ่อยมากๆ ใน javascript และผมหวังว่าบทความนี้จะช่วยให้ทุกคนเข้าในการทำงานของมันได้มากยิ่งขึ้นนะครับผม ขอบคุณสำหรับการอ่านบทความครับ

DEV Community: Patiphan Phengpao