บทที่ 3: ห่วงเหตุการณ์
Event Loop คืออะไร
คำจำกัดความพื้นฐานคือ “ลูปเหตุการณ์คือ ความลับเบื้องหลังการเขียนโปรแกรมแบบอะซิงโครนัสของ JavaScript” ลูปเหตุการณ์อยู่ใน Run Time Environment ของ JavaScript และช่วยในการรันโปรแกรมของเรา
เรารู้ว่า JavaScript เป็นภาษาเธรดเดี่ยวแบบซิงโครนัส โดยมี call stack เดียวเท่านั้นที่จะรันโปรแกรมของเรา ในฐานะนักพัฒนาเราต้องแน่ใจว่าเราไม่ได้บล็อกเธรดหลัก
Event Loop ช่วยในการเขียนโปรแกรมแบบอะซิงโครนัสอย่างไร
Call Stack ดำเนินการทุกอย่างที่อยู่ภายใน แต่สมมติว่าผู้ใช้คลิกปุ่มและมันเรียกใช้ฟังก์ชันที่ทำการโทรผ่านเครือข่ายและมี setTimeOut() และมันถูกเรียกใช้และยังเรียกใช้ฟังก์ชัน xyz() อื่น ๆ ด้วย ? ตอนนี้มันซับซ้อนมากขึ้น ฟังก์ชันใดจะถูกดำเนินการก่อน ? Call Stack จะจัดการอย่างไร? Event Loop จะช่วย Call Stack ดำเนินการทั้งหมดนี้ได้อย่างไร
คิวการติดต่อกลับ
คิวการโทรกลับ คือคิวที่ฟังก์ชันการโทรกลับทั้งหมดมาและอยู่เมื่อต้องการดำเนินการ เช่น setTimeOut(), setInterval()< /แข็งแกร่ง>. มีลำดับความสำคัญน้อยกว่า Micro-Task Queue
คิวงานย่อย
นอกจากนี้ยังเป็นคิวที่มีลำดับความสำคัญสูงกว่าคิวการโทรกลับอีกด้วย ฟังก์ชันการโทรกลับทั้งหมดจากสัญญาจะไปที่คิว Micro-Task เมื่อต้องการดำเนินการ เช่น fetch() ไมโครทาสก์ที่จัดคิวไว้ทั้งหมดจะถูกเปิดลงบน call stack ทีละรายการ และดำเนินการ
จากสิ่งนี้ เราสามารถเข้าใจได้ว่าไม่ใช่ทุกฟังก์ชันที่ถูกเรียกใช้จะเข้าไปภายใน call-stack และถูกดำเนินการโดยตรง สำหรับงานที่จัดคิวไว้เพื่อดำเนินการ เราจำเป็นต้องมี Event Loop
การทำงานของลูปเหตุการณ์
Event Loop ยังคงตรวจสอบ call-stack ว่าสแต็กว่างเพื่อดำเนินการงานที่จัดคิวไว้หรือไม่ เมื่อสแต็กว่างเปล่า Event Loop จะอนุญาตให้จัดคิวงานตามลำดับความสำคัญ หากมีฟังก์ชันการโทรกลับที่รอดำเนินการใน Micro-Task Queue อันดับแรกจะอนุญาตให้มีการโทรกลับอยู่ใน Micro-Task Queue และเมื่อไม่มีอะไรเหลือใน Micro-Task Queue ให้ดำเนินการ จากนั้นจะไปตรวจสอบ Callback Queue (Task Queue || Macro-Task Queue) และหากมีฟังก์ชันใดๆ ในคิวเพื่อดำเนินการ event loop อย่างรวดเร็ว จะช่วยให้ฟังก์ชันเหล่านั้นสามารถย้ายภายใน call stack และ call stack จะดำเนินการได้ นี่เป็นแนวคิดพื้นฐานเกี่ยวกับการเขียนโปรแกรมแบบอะซิงโครนัสเช่นกัน
