วิธีใช้ฟังก์ชันเรียกกลับของ JavaScript

คุณอาจเคยเห็นตัวอย่างโค้ดบางส่วนใช้คำว่า "โทรกลับ" ในฟังก์ชัน การเรียกกลับเป็นฟังก์ชันชนิดพิเศษที่ส่งผ่านภายในฟังก์ชันอื่น

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

ฟังก์ชันเรียกกลับคืออะไร

ฟังก์ชันเรียกกลับเป็นฟังก์ชันที่ส่งผ่านเป็นพารามิเตอร์ไปยังฟังก์ชันอื่น

ฟังก์ชันเรียกกลับทำงานภายในฟังก์ชันที่มีการประกาศ เมื่อคุณเรียกใช้ฟังก์ชัน ฟังก์ชันเรียกกลับ หากมีการระบุไว้ จะเรียกใช้งาน เมื่อเรียกใช้แล้ว ฟังก์ชันเรียกกลับจะส่งคืนการตอบสนองต่อฟังก์ชันหลัก

ฟังก์ชันเรียกกลับใช้งานได้เพราะใน JavaScript ทุกฟังก์ชันเป็นวัตถุ ซึ่งหมายความว่าเราสามารถทำงานกับพวกมันได้เหมือนกับวัตถุอื่นๆ เราสามารถกำหนดฟังก์ชันให้กับตัวแปร หรือส่งผ่านเป็นอาร์กิวเมนต์ เหมือนกับที่เราทำกับค่าอื่นๆ

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

function printName(name, callback) {
	console.log(`Player Name: ${name}`);
	callback();
}

นี่คือฟังก์ชัน JavaScript ที่ไม่ระบุชื่อซึ่งมีการเรียกกลับ ฟังก์ชันที่ไม่ระบุชื่อคือฟังก์ชันที่ไม่มีชื่อ มักจะปรากฏในฟังก์ชันอื่นๆ เช่นในตัวอย่างด้านบน

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

81% ของผู้เข้าร่วมกล่าวว่าพวกเขารู้สึกมั่นใจมากขึ้นเกี่ยวกับโอกาสในการทำงานด้านเทคโนโลยีหลังจากเข้าร่วม bootcamp จับคู่กับ Bootcamp วันนี้

ผู้สำเร็จการศึกษาจากหลักสูตร bootcamp โดยเฉลี่ยใช้เวลาน้อยกว่าหกเดือนในการเปลี่ยนอาชีพ ตั้งแต่เริ่มต้น bootcamp ไปจนถึงหางานแรก

มาลองใช้ฟังก์ชันนี้กัน:

printName("Violet", function() {
	console.log("Character Type: Mage");
})

เราเรียกฟังก์ชันของเราว่า printName() ในรหัสนี้ เราได้ระบุ “ไวโอเล็ต” เป็นชื่อผู้เล่น เราได้ระบุฟังก์ชันที่พิมพ์ประเภทอักขระเป็นการเรียกกลับ เรียกใช้รหัสนี้และดูว่าเกิดอะไรขึ้น:

ชื่อผู้เล่น:ไวโอเล็ต

ประเภทตัวละคร:นักเวทย์

เนื้อหาของ printName() ฟังก์ชั่นถูกดำเนินการ ตามด้วยเนื้อหาของฟังก์ชั่นการโทรกลับของเรา คุณไม่จำเป็นต้องประกาศฟังก์ชันการโทรกลับเมื่อคุณส่งผ่านฟังก์ชันเหล่านี้เป็นพารามิเตอร์ เราสามารถจัดโครงสร้างโค้ดของเราใหม่เพื่อให้ฟังก์ชันการโทรกลับเป็นของตัวเอง:

function printCharacterType() {
	console.log("Character Type: Mage");
}

printName("Violet", printCharacterType())

รหัสนี้จะส่งคืนการตอบกลับเดียวกัน เราได้สร้างฟังก์ชันที่เรียกว่า printCharacterType() ซึ่งพิมพ์ประเภทอักขระของผู้เล่นไปที่คอนโซล ฟังก์ชันนี้ทำงานเมื่อเราเรียกใช้ printName() ตามที่ระบุเป็นการโทรกลับ

การใช้การโทรกลับกับเหตุการณ์

โดยทั่วไปจะใช้การโทรกลับกับเหตุการณ์ JavaScript

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

<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.");
});

รหัสนี้เลือกองค์ประกอบที่มี ID "รูปภาพ" จากนั้นใช้เมธอด addEventListener เพื่อฟังเมื่อผู้ใช้ "เลื่อนเมาส์ไปเหนือ" (เลื่อนเมาส์ไปเหนือ) รูปภาพ เมื่อผู้ใช้วางเคอร์เซอร์เหนือรูปภาพ จะมีการพิมพ์ข้อความไปที่คอนโซล:

ผู้ใช้วางเมาส์เหนือรูปภาพ

การใช้การโทรกลับกับคำขอทางเว็บ

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

มาสร้างโปรแกรมที่ส่งคำขอไปยัง JSON Placeholder API ซึ่งเป็น API ที่มีข้อมูลจำลองที่เราสามารถใช้เพื่อการทดสอบ โปรแกรมของเราควรพิมพ์การตอบสนองต่อคอนโซล เราจะเริ่มต้นด้วยการประกาศฟังก์ชันที่ส่งคำขอ:

function makeRequest(url, callback) {
	var query = await fetch(url).then(res => res.json());
	callback(query);
}

ฟังก์ชันนี้จะสร้างคำขอเว็บโดยใช้ fetch() API การตอบสนองถูกกำหนดให้กับตัวแปร "แบบสอบถาม" เราส่งคืนผลลัพธ์ของคำขอเว็บนี้ไปยังการโทรกลับของเราโดยส่ง "แบบสอบถาม" เป็นอาร์กิวเมนต์ในฟังก์ชันการโทรกลับของเรา ตอนนี้ มาเรียกใช้ฟังก์ชันของเราและพิมพ์การตอบสนองต่อคอนโซล:

makeRequest("https://jsonplaceholder.typicode.com/posts/1", function(data) {
	console.log(data);
});

รหัสนี้แนะนำเมธอด makeRequest เพื่อส่งคำขอไปยัง JSON Placeholder API ฟังก์ชันเรียกกลับของเราจะพิมพ์ข้อมูลที่ส่งคืนจากคำขอนี้ไปยังคอนโซล:

{
  "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."
}

ยอดเยี่ยม! รหัสของเราได้ส่งคำขอทางเว็บและพิมพ์การตอบกลับไปยังคอนโซล

บทสรุป (และความท้าทาย)

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

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

ตอนนี้คุณพร้อมที่จะเริ่มใช้การเรียกกลับ JavaScript สำหรับการเขียนโปรแกรมแบบอะซิงโครนัสอย่างมืออาชีพแล้ว!