[Dev] Callback โทรกลับหน่อยนะ (บน JavaScript)

ช่วงนี้จับงาน Web เยอะ และใช้งาน jQuery ในการจัดการหน้า Webpage เป็นหลัก ใน jQuery เอง ได้มีการใช้งาน Callback ค่อนข้างเยอะ เช่นการดัก Event ต่าง ๆ วันนี้คันไม้คันมือ หลังจากไม่ได้เขียนมาเป็นเดือน เลยมาเขียนเกี่ยวกับ Callback ให้อ่านกัน

Callback

Callback แปลกันตรง ๆ ตัว ว่าโทรกลับ ในทาง Programming ก็เช่นกัน Callback มีไว้สำหรับ เรียกใช้งานกลับ… อย่าเพิ่งทำหน้าแบบนี้กันนะครับ Angry

สมมติว่า เวลาเราเขียนโปรแกรม แล้วต้องการให้ Function นึง ทำงานเสร็จก่อน หลังจากนั้นค่อยทำงานอีก Function นึง ขอยกตัวอย่าง Code เป็นภาษา JavaScript ดังนี้

จาก Code บรรทัดที่ 9 เรียกใช้งาน Function fnWorkFirst() และบรรทัดที่ 10 เรียกใช้งาน Function fnWorkSecond();

ดูเหมือนจะไม่มีอะไร แต่หากว่า fnWorkFirst นั้น ทำงานเป็นแบบ Asynchronous นั่นหมายความว่า ขณะที่ fnWorkFirst ทำงานอยู่นั้น โปรแกรมก็จะไม่หยุดรอทำงาน ลองดูตัวอย่างต่อไปกัน

บรรทัดที่ 9 ได้เปลี่ยนเป็นการใช้งาน function setTimeout เพื่อกำหนดให้รอเวลา 1000 ms ก่อน แล้วค่อยเรียกใช้งาน fnWorkFirst เผื่อจำลองการทำงานคล้าย ๆ แบบ Asynchronous สังเกตุผลลัพธ์ จะเห็นว่า ไม่มีการรอให้ fnWorkFirst ทำงานเสร็จก่อน ค่อยเรียก fnWorkSecond ทำงาน ทำให้ได้ผลลัพธ์จาก fnWorkSecond ก่อนนั่นเอง Ugh!

หากว่าเราต้องการ Output เหมือนเดิม จึงจำเป็นต้องให้ fnWorkFirst เรียกใช้งาน fnWorkSecond แทน ดังนี้

ซึ่งจะได้ผลลัพธ์เดียวกันกับตัวอย่างแรก

ทีนี้ ถ้าหากว่า fnWorkFirst ไม่ใช่เป็น Function ที่เราเป็นผู้พัฒนาขึ้นมาเองล่ะ แล้วจะทำยังไงให้ fnWorkFirst นั้น เรียกใช้งาน fnWorkSecond ให้เราได้ หลังจากที่ fnWorkFirst ทำงานเสร็จแล้ว

คำตอบก็คือ Callback นั่นเอง มาดู Code กันเลยดีกว่า

ที่บรรทัดที่ 10 มีการเรียกใช้งาน fnWorkFirst โดยมีการส่ง Parameter 1 ตัว คือ “ชื่อ” Function fnWorkSecond เข้าไป!?

ส่งชื่อ Function เข้าไปทำไม!? Doubt it! ลองดู Function fnWorkFirst ที่บรรทัดที่ 5 ดูซิครับ มีการรับ Parameter 1 ตัว และเรียกใช้งานที่บรรทัดที่ 7 นี่แหล่ะ ที่เราเรียกกันว่า Callback (เห็นไม๊ มันโทรกลับมาแล้ว!!!) Big Smile ซึ่งผลลัพธ์ก็เหมือนกันกับตัวอย่างแรก

และนอกจากให้ fnWorkFirst ทำการ Callback ให้แล้ว สามารถส่งข้อมูลผ่านทาง Parameter ให้ได้ด้วยนะ ลองดูตัวอย่างกันเลย

สังเกตุบรรทัดที่ 8 ใน fnWorkFirst มีการเรียกใช้งาน Callback พร้อมกลับส่ง Parameter ให้ 1 ตัว เพราะฉะนั้น Function ที่ส่งเข้ามาให้กับ fnWorkFirst จะรับ Parameter ได้ 1 ตัว ดังในบรรทัดที่ 1 ซึ่งใน JavaScript เปิดโอกาสให้สามารถกำหนด Parameter ไม่ตรงกันได้ เพราะฉะนั้น ใน Function fnWorkSecond หากไม่มี Parameter สำหรับรับค่าจากการ Callback ก็จะไม่เกิด Error ใด ๆ เพียงแต่จะไม่ได้รับค่าที่ fnWorkFirst ส่งกลับมาให้เท่านั้นเอง

สุดท้าย การเขียน Code ในลักษณะ Callback นั้น สามารถเขียนในอีกรูปแบบนึงได้ ดังนี้

Function fnWorkFirst ไม่มีแก้ไขใด ๆ แต่ Function fnWorkSecond นั้นหายไปแล้ว ลองสังเกตุบรรทัดที่ 6-9 ตั้งแต่คำว่า function (data_back) { จนถึง } นั่นก็คือ fnWorkSecond นั่นเอง เพียงแต่ไม่ต้องตั้งชื่อ Function!! (ชอบใช่ไม๊ล่ะ ไม่ต้องคิดชื่อ Function Ha Ha เชื่อว่า Programmer หลายท่าน บางครั้ง การตั้งชื่อตัวแปร/ฟังก์ชั่น นั้น เป็นเรื่องยากกว่าการเขียน Code ยิ่งนัก I Surrender!) แต่ผลการทำงานนั้น เหมือนในตัวอย่างก่อนหน้านี้เป๊ํะ

หวังว่าคงเข้าใจคำว่า Callback กันมากขึ้นนะครับ Callback นั้น ไว้สำหรับส่ง Function ให้ภายใน Function เรียกใช้งานนั่นเอง Function ที่ถูกส่งเข้าไป จึงเรียกกันว่า Callback Function นั่นเอง

ลองดูตัวอย่าง Callback ในภาษาต่าง ๆ ที่ Wikipedia กันดูนะครับ

คราวหน้าจะเอาตัวอย่างในภาษา VB.NET มาให้ดูกันบ้าง คอยติดตามนะครับ ว่าใน VB.NET มันจะใช้งาน Callback ยังไง

Leave a Reply

Your email address will not be published. Required fields are marked *

 

This site uses Akismet to reduce spam. Learn how your comment data is processed.