JavaScript แบบ Synchronous และ Asynchronous
JavaScript ทำงานบน single thread ซึ่งหมายความว่ามันจะประมวลผลทีละอย่าง คุณจำเป็นต้องเข้าใจวิธีที่มันจัดการกับงานต่างๆ เพื่อที่จะเขียนโค้ดได้อย่างมีประสิทธิภาพ
JavaScript แบบ Synchronous
โค้ดแบบ Synchronous จะทำงานทีละบรรทัด โดยแต่ละงานจะต้องรอให้งานก่อนหน้าเสร็จสิ้นก่อน สิ่งนี้เรียกว่าการ blocking หากงานใดงานหนึ่งใช้เวลานาน โปรแกรมทั้งหมดก็จะหยุดชะงัก
- การทำงาน: ลำดับที่แน่นอน
- การ blocking: มี
- ความซับซ้อน: ง่าย
- เหมาะสำหรับ: งานที่เรียบง่ายและเป็นลำดับขั้นตอน
JavaScript แบบ Asynchronous
โค้ดแบบ Asynchronous จะทำงานอย่างเป็นอิสระ งานต่างๆ จะไม่ไปขัดขวาง (block) โค้ดส่วนอื่นในขณะที่กำลังรอ สิ่งนี้เรียกว่า non-blocking โดยงานจะเริ่มทำงานในพื้นหลัง (background) และจะแจ้งเตือนคุณเมื่อทำงานเสร็จสิ้น
- การทำงาน: งานต่างๆ ทำงานอย่างเป็นอิสระ
- การ blocking: ไม่มี
- ความซับซ้อน: สูงกว่า
- เหมาะสำหรับ: การเรียก API, การตั้งเวลา (timers) และการจัดการไฟล์
3 วิธีในการจัดการกับงานแบบ asynchronous:
- Callbacks: ฟังก์ชันที่จะทำงานหลังจากงานเสร็จสิ้น
- Promises: ออบเจกต์ที่แสดงถึงความสำเร็จหรือความล้มเหลวของการทำงาน
- Async/Await: วิธีที่สะอาดที่สุด ช่วยให้โค้ดแบบ asynchronous ดูเหมือนโค้ดแบบ synchronous โดยไม่ไปขัดขวาง (block) การทำงานของ thread
การทำงานแบบ asynchronous ที่พบบ่อย:
- Timers:
setTimeout() - API calls:
fetch() - File reading:
readFile() - User events:
addEventListener()
Event Loop คือสิ่งที่ทำให้สิ่งนี้ทำงานได้ โดยจะใช้ Call Stack, Web APIs และ Callback Queue ในการจัดการงานหลายอย่างพร้อมกัน
สรุป:
- Synchronous: ทำงานทีละอย่างต่อกันไปเรื่อยๆ และขัดขวางการประมวลผล
- Asynchronous: งานทำงานอย่างเป็นอิสระ และไม่ขัดขวางการประมวลผล
- ค่าเริ่มต้นของ JavaScript: Synchronous
Source: https://www.geeksforgeeks.org/javascript/synchronous-and-asynchronous-in-javascript/ Source: https://www.w3schools.com/js/js_asynchronous.asp Source: https://medium.com/@mohdtalib.dev/what-is-synchronous-and-asynchronous-in-javascript-07adb7b4cc5f
Full post: https://dev.to/raja_b_0c9d242e2c26cf063b/javascript-synchronous-and-asynchronous-2a69