Sync và Aync trong JavaScript

I.Ngôn ngữ bất đồng bộ và đồng bộ                                             
Ở trong các ngôn ngữ C hay Java trình biên dịch dịch code từ trên xuống dưới từ trái qua phải ta gọi đây là những ngôn ngữ đồng bộ tức là những tác vụ của nó ( chạy hàm , khai báo biến , ...) tất cả những tác vụ này đều là đồng bộ (thực hiện theo thứ tự).

=>  Java script là là ngôn ngữ vừa bất đồng bộ và đồng bộ tức là những nó sẽ có cả những tác vụ không đồng bộ và tác vụ đồng bộ phân biệt với các ngôn ngữ C hay Java thì nó chỉ 1 loại tác vụ , có 2 điểm cần chú ý .

+ Tác vụ không đồng bộ chỉ được thực thi khi tất cả các tác vụ đồng bộ đã thực hiện xong.
+ Muốn biết tác vụ nào là đồng bộ bạn cần phải xem document của nó (setTimeOut là một ví dụ).
+ Chú ý trong JS hàm không được xử lý ngay khi gọi mà phải đợi trong messageQueu

I.Cơ chế hoạt động của bất đồng bộ.

Để hiểu được cần phải biết qua về khái niệm callstack , webAPIs , Callbackqueue và eventLoop.

- callStack : Là một dạng cấu trúc dữ liệu nơi ghi lại thứ tự các lệnh đang được thực thi trong chương trình , lệnh nào đang được thực hiện sẽ được đẩy lên đầu ngăn xếp(stack) , thực hiện xong nó được đẩy ra ngoài.

-webAPIs : là những luồng mà chúng ta không thể điều khiển (kích hoạt nó chạy hay truy cập trực tiếp) mà chỉ có thể gọi đến nó , những luồng này do trình duyệt cung cấp..


- CallBackQueue(MessageQueu) :Nơi tiếp nhận các hàm được xử lý , mỗi hàm tương ứng với một message .  Giống như callStack cũng là một dạng cấu trúc dữ liệu theo nguyên tắc First-in-First-out (thằng nào vào trước ra trước) như xếp hàng mua kem vậy. Chú ý hàm trong javascript sẽ không bao giờ được xử lý trực tiếp hàm mà sẽ được gọi tương ứng với một message trong hàng đợi.

- EventLoop : Giám sát viên , kiểm tra tình trạng của callstack và callBackQueue...thấy trong CallStack trống thì đẩy tiếp message vào callStack để nó xử lý.

Để trực quan cùng lấy ví dụ

VD 1 : Đối với tác vụ đồng bộ

=>> Chạy câu lệnh console.log("Hello world") trên IDE
=>> Dòng lệnh sẽ được biên dịch và đưa vào trong callStack
=>> Khi nó chạy xong thì nó sẽ được đẩy ra khỏi callStack.

=> Tiếp đến khi chạy câu lệnh thứ 2
- Đưa vào call stack
- Vì setTimeOut là một thred nên nó được tiếp tục chuyển vào webAPI

=> Lúc này CallStack trống nên câu lệnh thứ 3 được Event Lopp đẩy vào và chạy và bị đẩy ra khỏi CallStack.
- Khi hết 1s webAPI trả về kết quả nhưng chưa hiển thị ra màn hình mà được đưa vào CallBackQueue

=> Event Loop có nhiệm vụ kiểm tra xem CallStack còn trống hay không , lúc này CallBackQueue đang chứa kết quả mà WebAPI trả về và CallStack cũng đang trống nên Evet Loop sẽ đẩy kết quả này vào trong CallStack

=> Câu lệnh được in ra màn hình.


Chú ý :

- Event Loop chỉ đẩy lệnh từ CallBackQueue vào CallStack khi CallStack chạy xong tất cả các lệnh (trống) điều này cũng giải thích vì sao các lệnh đồng bộ phải thực hiện xong hết thì các lệnh bất đồng bộ mới thực hiện

- Thứ tự trả về kết quả của WebAPI không theo  nguyên tắc First - In - First - Out mà cứ lệnh nào chạy xong thì nó được đẩy vào CallBackQueue.