ทำความเข้าใจกับ WEB API, Event Loop และคิว Callback

เรารู้ว่า Call Stack เป็นสถานที่ที่การดำเนินการ Javascript ทั้งหมดเกิดขึ้น หาก Call Stack มีการดำเนินการ/งานที่ต้องทำ การดำเนินการอื่นๆ ในเว็บเบราว์เซอร์จะหยุดแสดงผล ตัวอย่างเช่น หากคุณมี for-loop ขนาดใหญ่มากระหว่าง 1 ถึงล้านฟังก์ชันใน Call Stack จะดำเนินการจนถึงจุดสิ้นสุด for-loop สิ่งนี้จะทำให้เว็บเบราว์เซอร์ไม่ตอบสนองหากการดำเนินการใช้เวลานานในการดำเนินการ

เพื่อแทนที่ข้อบกพร่องข้างต้นที่เว็บเบราว์เซอร์แนะนำ Web API นั้น WEB API จะใช้เพื่อจัดการการทำงานของ Javascript เมื่อใดก็ตามที่มีงานที่ใช้เวลานานในการดำเนินการใน Call Stack โดยใช้งาน . วิธีการของ Web API เช่น

  1. ตั้งค่าหมดเวลา,
  2. ตั้งค่าช่วงเวลา,
  3. การโทร AJAX (xmlhttprequest)

ฉันจะอธิบายสิ่งนี้ด้วยตัวอย่าง

function message() {
      return 'Good Morning';
}
setTimeout(function timeout() {
    console.log('Click the button!');
}, 5000);
message();

ใน Javascript การดำเนินการจะเกิดขึ้นจากบนลงล่างหรือทีละบรรทัด ขั้นแรกล่ามจะชี้ไปที่เมธอดข้อความแต่ไม่พบฟังก์ชันที่เรียกได้ จากนั้นมันจะชี้ไปที่เมธอด setTimeout และ setTimeout เป็น Web API ดังนั้นมันจะย้ายไปยัง Web API จาก Call Stack จากนั้นล่ามจะชี้ไปที่เมธอด callable message() และเรียกเมธอด message แล้วส่งคืนสตริง 'Good Morning' ที่นี่สองครั้งที่รายการถูกสร้างเป็น Call Stack และป๊อปจาก Call Stack เมื่อข้อความกลับมา

ในขณะเดียวกันใน Web API หลังจาก 5 ms วิธีการ push timeout() ของ Web API ไปยัง Callback Queue Callback Queue คือตำแหน่งที่ฟังก์ชันทั้งหมดจะโผล่ออกมาจาก Web API โดยจะเป็นไปตามโครงสร้างข้อมูลคิวแบบ FIFO (เข้าก่อนออกก่อน) ซึ่งหมายความว่าฟังก์ชันแรกที่กดไปที่คิว Callback จาก Web API จะเป็นฟังก์ชันแรกที่จะปรากฏขึ้น จากคิวที่เรียกได้ไปจนถึง Call Stack ผ่าน Event Loop

Event Loop: Event Loop ตรวจสอบ Call Stack อย่างต่อเนื่องเพื่อส่งฟังก์ชันที่ดำเนินการบางส่วนจาก Callback Queue ไปยัง Call Stack เพื่อดำเนินการต่อไป สำหรับสิ่งนี้ Event Loop จะต้องยืนยันว่าไม่มีฟังก์ชันที่ทำงานอยู่ใน Call Stack และควรว่างเปล่า

แม้ว่าคุณจะตั้งค่าฟังก์ชัน Timeout เป็น 0 ms มันก็จะเรียกใช้เมธอด timeout() ในที่สุด

บทสรุป:

กระบวนการหมุนเวียนตั้งแต่ Call Stack ไปจนถึง Web API และจาก Web API ไปจนถึง Callback Queue และจาก Callback Queue ไปจนถึง Call Stack ไปจนถึง event loop เป็นกระบวนการที่สมบูรณ์วิธีที่ Javascript ทำงานภายในเว็บเบราว์เซอร์