รู้จักกับ Javascript Callback Function

ในการเขียนโปรแกรมด้วย Javascript เราจะได้เห็น Source Code หน้าตาแบบด้านบนนี้อยู่บ่อยๆ สำหรับมือใหม่ที่เพิ่มจะเริ่มต้นศึกษา Javascript อาจจะไม่ค่อยคุ้นเคยสักเท่าไหร่ เพราะดูๆไป Syntax มันก็ออกจะหน้าตาแปลกๆ แต่ถ้าจะมาจริงจังกับการศึกษา Javascript แล้วนั้นการทำความเข้าใจเรื่องนี้เป็นสิ่งทำสำคัญเป็นอย่างยิ้ง

รูปแบบการเขียน Code แบบที่ว่านี้เราเรียกว่า Callback Function ซึ่งถ้าจะแปลกันแบบตรงๆตัว ก็น่านะได้ว่า “ฟังชั่นเรียกกลับ” ซึ่งแปลแล้วก็ยังดูงงๆอยู่ใช้ไหม แต่ไม่เป็นไร เรามาดูว่ามันคืออะไร ทำงานอย่าไร และมีประโยชน์อย่างไรกันเลยดีกว่า

ก่อนจะไปรู้จักกับ Callback Function เรามาทำความรู้จักกับรูปแบบการทำงานของ Function ที่มีอยู่ใน Javascript กันก่อนดีกว่านะ ซึ่งมันมีอยู่ 2 แบบ ก็คือ sync กับ async

ในส่วนของ sync นั้นเราน่าจะคุ้นเคยกันมาอยู่แล้วเพราะมันคือรูปแบบการทำงานของโปรแกรมทั่วๆไปที่เคยเรียนมา ซึ่งมันทำงานตามลำดับจากบนลงล่าง และถ้ามีการเรียก Function ก็จะแวะเข้าไปทำคำสั่งต่างๆข้างใน Function แล้วเมื่อทำเสร็จก็จะออกมาที่ main โปรแกรมแล้วค่อยทำคำสั่งต่อๆไปใน main โปรแกรมอีกที ถ้านึกภาพไม่ออกให้ลองดู Code ข้างล่างนี้

ที่นี้เรามาดูในส่วนของ async กันบ้าง การทำงานแบบ async นั้นค่อนข้างจะพิเศษกว่าตรงที่ว่าในการเรียก Function แต่ละครั้งเราไม่ต้องรอให้ Function ทำงานเสร็จก่อน Code บรรทัดถัดไปสามารถทำงานได้เลย มาดูตัวอย่างกัน

จาก Code ด้านบน setTimeout นั้นเป็น Function แบบ async ซึ่งจะทำงานเมื่อถึงเวลาที่กำหนด(ในตัวอย่างตั้งไว้ที่ 3000 ms หรือก็คือ 3 วินาทีนั้นเอง) จากผลลัพท์จะเห็นว่าในขณะที่ฟังชั่น setTimeout ยังทำงานไม่เสร็จโปรแกรมของเรานั้นไปทำงานในบรรทัดที่ 5 ก่อนแล้ว และเมื่อถึงเวลา 3 วินาทีต่อมา ผลลัพท์ของบรรทัดที่ 2 ถึงค่อยทำงาน นี้คือการทำงานแบบ async นั้นเอง

สรุปการทำงานของ Callback Function คือการทำงานแบบ async คือจะไม่มารอให้ทำงานเสร็จก่อนแล้วค่อยทำคำสั่งถัดไปนั้นเอง

ที่นี้เรามาดูตัวอย่างของฟังชั่น async และการใช้งาน callback ตัวอื่นๆกัน

มาถึงจุดนี้แล้วบางคนอาจจะยังไม่เข้าใจ Syntax ของการเรียกใช้ Callback Function เรามาดูตรงนี้กันให้ละเอียดขึ้นกันดีกว่าซึงผมจะยกตัวอย่างฟังชั่น setTimeout มาให้ดูก็แล้วกันนะ

ฟังชั่น setTimeout จะมีการรับ parameter อยู่ 2 ตัวก็คือ

1. Function ที่จะให้ทำงานเมื่อถึงเวลาที่กำหนด(หรือก็คือ Callback Function นั่นเอง)
2. Integer ที่ใช้กำหนดเวลา มีหน่วยเป็น ms

ตัวที่ทำให้มันดูซับซ้อนก็คือไอ้เจ้า parameter ตัวที่ 1 นั่นเอง เพราะมันเป็นการเอา Function เข้าไปเป็น parameter ทำให้ Code ของเรามันดูแปลกๆ ซึ่งจริงๆแล้วเราสามารถเขียนให้มันดูง่ายกว่านี้ได้ด้วยการแยก Function ออกมาประกาศไว้ข้างนอกฟังชั่น setTimeout ตามตัวอย่างข้างล่าง ซึ่งผลลัพท์ก็ยังคงเหมือนเดิม

มาลองสร้างฟังชั่น Async ด้วยตัวเองกัน

ในการสร้างฟังชั่น Async ให้เรามองว่าฟังชั่นที่เราสร้างนั้นสามารถรับฟังชั่นอื่นๆเขามาเป็น parameter ได้(ซึ่งมันจะแปลกๆหน่อย แต่ต้องทำความคุ้นเคยเอาไว้)

จาก Code ด้านบนเรามีการสร้างฟังชั่นขึ้นมา 2 ฟังชั่นคือ myAsyncFunc กับ callbackFunc ซึ่ง myAsyncFunc นั้นจะเป็นฟังชั่นแบบ Async ส่วน callbackFunc นั้นจะเป็นฟังชั่นธรรมดาที่เราจะเอาไปใส่เป็น parameter เพื่อให้เรียกกับมา(หรือ Callback นั่นเอง)

การทำงานของ Code ด้านบนจะทำตามลำดับดังนี้

บรรทัดที่ 1
บรรทัดที่ 3
บรรทัดที่ 4
บรรทัดที่ 7
บรรทัดที่ 8
บรรทัดที่ 9
บรรทัดที่ 5
บรรทัดที่ 2

เพื่อให้เข้าใจยิ่งขึ้นให้ลองเอา Code พวกนี้ไปลองรันเล่นดูกันนะ