คุณน่าจะเคยเห็นโค้ดสนิปเป็ตบางส่วนใช้คำว่า "callback" ภายในฟังก์ชัน Callbacks เป็นประเภทฟังก์ชันพิเศษที่ถูกส่งผ่านเข้าไปในฟังก์ชันอีกตัวหนึ่ง
Callbacks มักถูกใช้ภายใน event handlers เพื่อรันบล็อกโค้ด ในคู่มือนี้ เราจะพูดถึงว่า callback functions คืออะไร และทำงานอย่างไร เราจะเดินทางผ่านตัวอย่างของ callback function เพื่อช่วยให้คุณเรียนรู้วิธีใช้พวกมันในโค้ดของคุณ
Callback Function คืออะไร?
Callback function คือฟังก์ชันที่ถูกส่งเป็นพารามิเตอร์เข้าไปในฟังก์ชันอีกตัวหนึ่ง
Callback functions ถูก run ภายในฟังก์ชันที่พวกมันถูกประกาศ เมื่อคุณ execute ฟังก์ชัน ฟังก์ชัน callback ของมัน ถ้ามีการระบุ จะ execute ด้วย เมื่อมันรันเสร็จ ฟังก์ชัน callback จะคืนค่าการตอบสนองไปยังฟังก์ชันหลัก
Callback functions ทำงานได้เพราะใน JavaScript ทุกฟังก์ชันเป็น object นี่หมายความว่าเราสามารถทำงานกับพวกมันเหมือน object ใดๆ เราสามารถกำหนดฟังก์ชันให้ตัวแปร หรือส่งพวกมันเป็น arguments เหมือนเราจะทำกับค่าใดๆ
มาใช้ตัวอย่างง่ายๆ เพื่อแสดงว่า callbacks ทำงานอย่างไร เราจะสร้างฟังก์ชันที่พิมพ์ชื่อผู้ใช้สำหรับวิดีโอเกมไปที่ console ตามด้วยประเภทตัวละครของพวกเขา เริ่มต้นด้วยการประกาศฟังก์ชัน:
function printName(name, callback) { console.log(`Player Name: ${name}`); callback(); } นี่คือ anonymous JavaScript function ที่มี callback Anonymous functions คือฟังก์ชันที่ไม่มีชื่อ พวกมันมักปรากฏภายในฟังก์ชันอื่นๆ เหมือนในตัวอย่างด้านบน
Callback นี้คือพารามิเตอร์ที่สองในโค้ดของเรา เมื่อฟังก์ชันนี้รัน ชื่อของผู้เล่นของเราจะถูกพิมพ์ไปที่ console จากนั้น เนื้อหาของฟังก์ชัน callback() ของเราจะถูก execute
81% ของผู้เข้าร่วมระบุว่ารู้สึกมั่นใจมากขึ้นเกี่ยวกับโอกาสงานทางเทคโนโลยีหลังจากเข้าร่วมบูทแคมป์ ได้รับการจับคู่กับบูทแคมป์วันนี้
นักศึกษาจบบูทแคมป์เฉลี่ยใช้เวลาน้อยกว่า 6 เดือนในการเปลี่ยนอาชีพ ตั้งแต่เริ่มบูทแคมป์จนหางานแรก
ตอนนี้ มาใช้ฟังก์ชันนี้:
printName("Violet", function() { console.log("Character Type: Mage"); }) เราเรียกฟังก์ชัน printName() ในโค้ดนี้ เราระบุ "Violet" เป็นชื่อผู้เล่น เราระบุฟังก์ชันที่พิมพ์ประเภทตัวละครเป็น callback มา run โค้ดนี้และดูว่าจะเกิดอะไรขึ้น:
Player Name: Violet
Character Type: Mage
เนื้อหาของฟังก์ชัน printName() ถูก execute ตามด้วยเนื้อหาของฟังก์ชัน callback ของเรา Callback functions ไม่จำเป็นต้องประกาศเมื่อคุณส่งพวกมันเป็นพารามิเตอร์ เราสามารถ refactor โค้ดของเราได้ เพื่อให้ฟังก์ชัน callback ของเราอยู่ตัวเดียว:
function printCharacterType() { console.log("Character Type: Mage"); } printName("Violet", printCharacterType()) โค้ดนี้จะคืนค่า response เดียวกัน เราสร้างฟังก์ชันชื่อ printCharacterType() ซึ่งพิมพ์ประเภทตัวละครของผู้เล่นไปที่ console ฟังก์ชันนี้ถูก execute เมื่อเรา run printName() เพราะมันถูกระบุเป็น callback
ใช้ Callbacks กับ Events
Callbacks มักใช้กับ JavaScript events
Events ฟังการกระทำ เช่น ผู้ใช้คลิกปุ่ม และรันบล็อกโค้ดเมื่อการกระทำนั้นถูกทำ มาสร้าง callback ที่รันเมื่อผู้ใช้ hover รูปภาพ เปิดไฟล์ HTML และ paste โค้ดต่อไปนี้ภายในแท็ก <body>:
<img src=“https://careerkarma.com/favicon.ico” id=“image” />
นี่กำหนดรูปภาพบนหน้าเว็บที่ผู้ใช้สามารถคลิกได้ จากนั้นล้อมรอบโค้ด JavaScript ต่อไปนี้ภายในแท็ก <script>:
var image = document.querySelector("#image") image.addEventListener("mouseover", function() { console.log("The user has moused over the image."); }); โค้ดนี้เลือก element ที่มี ID "image" มันจากนั้นใช้เมธอด addEventListener เพื่อฟังเมื่อผู้ใช้ "mouses over" (hover) รูปภาพ เมื่อผู้ใช้ hover รูปภาพด้วยเคอร์เซอร์ ข้อความจะถูกพิมพ์ไปที่ console:
The user has moused over the image.
ใช้ Callbacks กับ Web Requests
Web requests ปกติต้อง execute แบบ synchronous นี่เป็นเพราะ web applications ส่วนใหญ่ต้อง retrieve ข้อมูลเฉพาะก่อนที่ส่วนที่เหลือของหน้าจะสามารถโหลดได้
มาสร้างโปรแกรมที่ทำ request ไปที่ JSON Placeholder API API ที่มี dummy data ที่เราสามารถใช้เพื่อทดสอบ โปรแกรมของเราควรพิมพ์ response ไปที่ console เราจะเริ่มด้วยการประกาศฟังก์ชันที่ทำ request:
function makeRequest(url, callback) { var query = await fetch(url).then(res => res.json()); callback(query); } ฟังก์ชันนี้จะทำ web request โดยใช้ fetch() API Response ถูกกำหนดให้ตัวแปร "query" เราคืนค่าผลลัพธ์ของ web request นี้ไปยัง callback ของเราโดยการส่ง "query" เป็น argument ในฟังก์ชัน callback ของเรา ตอนนี้ เรียกฟังก์ชันของเราและพิมพ์ response ของมันไปที่ console:
makeRequest("https://jsonplaceholder.typicode.com/posts/1", function(data) { console.log(data); }); โค้ดนี้สั่งให้ makeRequest method ทำ request ไปที่ JSON Placeholder API ฟังก์ชัน callback ของเราพิมพ์ข้อมูลที่คืนมาจาก request นี้ไปที่ console:
{ "userId": 1, "id": 1, "title": "sunt aut facere repellat provident occaecati excepturi optio reprehenderit", "body": "quia et suscipit\nsuscipit recusandae consequuntur expedita et cum\nreprehenderit molestiae ut ut quas totam\nnostrum rerum est autem sunt rem eveniet architecto." } ยอดเยี่ยม! โค้ดของเราทำ web request และพิมพ์ response ของมันไปที่ console
สรุป (และ Challenge)
Callbacks ช่วยให้คุณส่งฟังก์ชันเป็นพารามิเตอร์ภายในฟังก์ชันอีกตัวหนึ่ง พวกมันมักใช้ภายใน event handlers เพื่อรันโค้ดเมื่อ event ถูก execute หรือเพื่อทำ web requests
คุณมองหา challenge อยู่ไหม? เขียน callback function ที่ execute เมื่อปุ่มถูกกดบนหน้าเว็บ หากคุณทำแล้ว ลองเขียนฟังก์ชันที่จัดเรียงรายการ items และใช้ callback function พิมพ์แต่ละตัวไปที่ console
ตอนนี้คุณพร้อมที่จะเริ่มใช้ JavaScript callbacks สำหรับ asynchronous programming อย่างมืออาชีพแล้ว!
