XỬ LÝ ĐỒNG BỘ VÀ BẤT ĐỒNG BỘ TRONG JAVASCRIPT

30/09/2021 27
dong bo va bat dong bo javascript 7
CODEWELL

Trong quá trình triển khai Javascript, đồng bộ và bất đồng bộ luôn là những trường hợp hoàn toàn có thể xảy ra. Nhất là khi nhiều luồng cùng truy cập vào một dữ liệu, điều đó có thể gây nên các lỗi nghiêm trọng hoặc kết quả không theo ý muốn. Vì vậy, việc xử lý đồng bộ và bất đồng bộ trong Javascript là một kỹ năng quan trọng. Hãy cùng theo dõi hướng dẫn từ chuyên gia của CO-WELL Asia về cách xử lý trong Javascript nhé!

1. Tìm hiểu sample đơn giản trong Javascript

Chẳng hạn, chúng ta cùng có 2 hàm xử lý chờ sau 3 giây thì xử lý log. Cụ thể như sau:

dong bo va bat dong bo trong javacript 1

Như bình thường thì các dòng code sẽ được chạy theo tuần tự từ đầu đến cuối nên khi log sẽ như sau:

dong bo va bat dong bo trong javascript 2

Tuy nhiên, thực tế lại xảy ra như sau:

dong bo va bat dong bo trong javascript 3

Như vậy, chúng ta có thể thấy thấy nó không chạy theo thứ tự. Mà khi asyncAfter3second được gọi thì không đợi ở đó 3 giây mà sẽ bỏ qua để xử lý tiếp. Kết quả của hàm asyncAfter3second được gọi sau cùng. Cách xử lý như vậy chính là việc xử lý bất đồng bộ.

 

Cơ chế của xử lý bất đồng bộ là các hàm không được thực thi ngay mà được đưa vào thread riêng để chạy và kết quả được trả về Queue. Có 1 thread Event loop luôn check Queue khi có kết quả trả về sẽ gọi hàm callback tương ứng để xử lý tiếp cho hàm bất đồng bộ.

dong bo va bat dong bo trong javascript 4

Những hàm bất đồng bộ là các hàm gọi thông qua Web API. Các hàm này sẽ được gọi thông qua một thread mà không đợi kết quả trả về. Thay vào đó sẽ thực hiện tiếp các xử lý bên dưới.

 

Như ở ví dụ trên thì đầu tiên chúng ta gọi hàm syncAfter3second. Hàm này có 1 vòng loop nên sẽ lặp đợi ở đây và chạy tiếp. Sau đó gọi tiếp hàm asyncAfter3second bất đồng bộ. Do hàm này là hàm bất đồng bộ nên sẽ được đẩy vào 1 thread riêng để chạy và sau đó skip ở đây rồi tiếp tục các xử lý bên dưới.

 

Tiếp tục gọi hàm asyncAfter3second, vì là hàm bất đồng bộ nên cũng được đẩy vào thread riêng để chạy và nó tiếp tục chạy hàm tiếp theo trong main thread. Hàm syncAfter3second được chạy tiếp, tại đây có 1 vòng loop để đợi 3s sau khi chạy xong thì hàm này kết thúc.

 

Lúc này Event loop là 1 thread riêng và luôn check trong Queue. Khi có 1 kết quả của Web API trả về, Event loop sẽ gọi hàm callback tương ứng để trả kết quả. Ở ví dụ trên thì sau khi 2 hàm bất động bộ trả về kết quả trong Queue nó sẽ gọi đến hàm callback tương ứng thực hiện console.log(‘asyncAfter3second’).

2. Khi nào thì cần xử lý bất đồng bộ và xử lý đồng bộ

Chúng ta cần xử lý đồng bộ khi mà xử lý trước là rằng buộc (input) cho xử lý sau. Khi đó chúng ta bắt buộc phải xử lý theo đúng trình tự (đồng bộ). Xử lý đồng bộ có một điểm là sẽ làm cho tốc độ xử lý chậm đi vì nó buộc phải xử lý tuần tự. Ngược lại, khi các xử lý không rằng buộc thì chúng ta nên dùng xử lý bất đồng bộ. Điều này sẽ làm cho web chạy nhanh hơn. vì đồng thời nhiễu được xử lý cùng 1 lúc.

 

Cơ bản nhất các bạn có thể hiểu khi load file js hay css nếu để load đồng bộ thì có lẽ sẽ phải đợi khá lâu trang web của bạn mới load xong. Nhưng nếu load bất đồng bộ thì kết quả sẽ rất khả quan.

 

Ngoài ra, khái niệm lazy load hay tìm hiểu về Callback / Promise hay Async / Await sẽ giúp bạn hiểu rõ về bất động bộ. Lấy ví dụ 1 màn hình của bạn cần gọi 3 API, trong đó:
– API1 load mất 2 giây
– API2 load mất 5 giây
– API3 load mất 6 giây

Nếu như các bạn để load đồng bộ thì sẽ phải mất 2 + 5 + 6 = 13 giây xong các bạn mới xử lý để hiện thị màn hình. Nhưng nếu bạn để load bất đồng bộ thi các bạn chỉ mất khoảng 6 giây là đã load xong tài nguyên.

dong bo va bat dong bo trong javascript 5

Chúng ta có thể thấy rõ lợi thế khi sử dụng bất đồng bộ. Ở ví dụ trên các bạn cần chú ý cả 3 api trên sẽ được load bất động bộ nhưng để màn hình hiện thị được các bạn cần phải đợi cả 3 API kết thúc thì bạn mới bắt đầu phần xử lý hiện thị cho màn hình. Lúc này các bạn cần tìm hiểu thêm về Promise.

dong bo va bat dong bo trong javascript 6

Lời khuyên dành cho bạn là nếu cái gì xử lý được bất đồng bộ thì nên xử lý bất đồng bộ. Việc quản lý (event, tài nguyên) của bạn phức tạp hơn nhưng đổi lại xử lý của bạn sẽ nhanh hơn tương đối nhiều.

MIÊNG TQ – CO-WELL Asia

Trên đây là những hướng dẫn từ cơ bản tới chi tiết của chuyên gia từ CO-WELL Asia về đồng bộ và bất đồng bộ trên Javascript. Đừng quên theo dõi chuyên mục CODEWELL trên website CO-WELL Asia để đón đọc những bài viết về Javascript nói riêng và công nghệ bổ ích nói chung nhé!