𝗨𝗻𝗱𝗲𝗿𝘀𝘁𝗮𝗻𝗱𝗶𝗻𝗴 𝗦𝘆𝗻𝗰𝗵𝗿𝗼𝗻𝗼𝘂𝘀 𝗮𝗻𝗱 𝗔𝘀𝘆𝗻𝗰𝗵𝗿𝗼𝗻𝗼𝘂𝘀 𝗝𝗮𝘃𝗮𝗦𝗰𝗿𝗶𝗽𝘁

JavaScript thực thi từng tác vụ một tại một thời điểm. Điều này là do nó là một ngôn ngữ đơn luồng (single-threaded).

Để xây dựng các ứng dụng nhanh, bạn phải biết sự khác biệt giữa mã đồng bộ (synchronous) và bất đồng bộ (asynchronous).

Synchronous Execution

Mã chạy theo từng dòng. Mỗi tác vụ phải chờ tác vụ trước đó hoàn thành.

Hãy tưởng tượng một hàng đợi tại cây ATM. Người thứ hai không thể sử dụng máy cho đến khi người thứ nhất hoàn tất giao dịch.

Nếu một tác vụ mất nhiều thời gian, toàn bộ chương trình sẽ bị dừng lại. Điều này được gọi là hiện tượng chặn (blocking).

Asynchronous Execution

Các tác vụ chạy độc lập. JavaScript bắt đầu một tác vụ và chuyển ngay sang tác vụ tiếp theo.

Hãy tưởng tượng một nhà hàng. Bạn gọi món, sau đó bạn trò chuyện với bạn bè trong khi chờ đợi. Bạn không ngồi yên một chỗ và chờ thức ăn đến rồi mới làm việc khác.

Mã bất đồng bộ giúp ứng dụng của bạn không bị đóng băng (freeze) trong quá trình:

  • yêu cầu API
  • truy vấn cơ sở dữ liệu
  • đọc tệp
  • tải lên hình ảnh

Ba cách để xử lý mã bất đồng bộ:

  1. Callbacks Một hàm sẽ chạy sau khi một tác vụ cụ thể hoàn tất. Nó giống như việc người giao hàng gọi cho bạn khi thức ăn đã đến.

  2. Promises Một promise đại diện cho một kết quả trong tương lai. Nó ở trạng thái chờ (pending) cho đến khi được giải quyết (resolved - thành công) hoặc bị từ chối (rejected - lỗi).

  3. Async/Await Cách này giúp mã bất đồng bộ trông giống như mã đồng bộ. Nó rất dễ đọc. Bạn sử dụng await để tạm dừng một hàm mà không làm chặn phần còn lại của chương trình.

Cách thức hoạt động bên dưới (under the hood):

JavaScript sử dụng một Event Loop để quản lý các tác vụ này.

  • Call Stack: Theo dõi các hàm hiện tại của bạn.
  • Web APIs: Xử lý các tác vụ lâu như timers hoặc fetches.
  • Callback Queue: Lưu trữ các tác vụ đã hoàn thành.
  • Event Loop: Chuyển các tác vụ từ queue vào stack khi stack trống.

So sánh:

Synchronous:

  • Chạy tuần tự
  • Chặn chương trình
  • Dễ viết
  • Chậm đối với các tác vụ nặng

Asynchronous:

  • Chạy độc lập
  • Không chặn (Non-blocking)
  • Phức tạp hơn
  • Hiệu quả cho các ứng dụng web

Nắm vững các khái niệm này là chìa khóa để sử dụng React, Node.js và các API hiện đại.

Source: https://www.geeksforgeeks.org/javascript/synchronous-and-asynchronous-in-javascript/ Source: https://www.browserstack.com/guide/synchronous-vs-asynchronous-in-javascript Full post: https://dev.to/annapoo/understanding-synchronous-and-asynchronous-javascript-5gea