Hủy phản hồi
Viết lời bình của bạn
Lời bình luận của khách hàng sẽ được xem xétCung cấp email thật để nhận các câu trả lời, nếu không bình luận của bạn sẽ bị xóa
Tên bạn *
Email của bạn *
Trang web của bạn
Tiêu đề bình luận
Tôi khẳng định 100% là người thực
Tôi lặp lại tôi không phải là công cụ
Trong quá trình khai thác 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 ra 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 đơn giản mẫu 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ý nhật ký. Các cụ thể như sau
Như bình thường thì các dòng mã sẽ được chạy theo tuần tự từ đầu đến cuối nên khi log sẽ như sau
Tuy nhiên, thực tế lại xảy ra như sau
Như vậy, chúng ta có thể 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à cách 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 luồng riêng để chạy và kết quả được trả về Hàng đợi. 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ộ
Các hàm bất đồng bộ này là các hàm gọi thông qua Web API. Hàm này sẽ được gọi thông qua một luồng không mong đợ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, đầu tiên chúng ta gọi hàm syncafter3second. Hàm này có 1 vòng lặp nên sẽ đợi ở đây và chạy tiếp. Sau đó gọi tiếp hàm asyncAfter3second bất đồng bộ. Hàm này là hàm bất đồng bộ nên sẽ được đưa vào 1 luồng riêng để chạy và sau đó bỏ qua ở đây rồi tiếp tục xử lý các xử lý bên dưới
Tiếp tục gọi hàm asyncSau3 giây, vì hàm bất đồng bộ nên cũng được đưa vào luồng riêng để chạy và nó tiếp tục chạy hàm tiếp theo trong luồng chính. Hàm syncafter3second được chạy tiếp, tại đây có 1 vòng lặp đợi 3s sau khi chạy xong thì hàm này kết thúc
Lúc này Vòng lặp sự kiện là 1 luồng riêng và luôn kiểm tra trong Hàng đợi. Khi có 1 kết quả của Web API trả về, Event loop sẽ gọi hàm callback tương ứng để trả về kết quả. Ở ví dụ trên thì sau khi 2 hàm bất động bộ trả về kết quả trong Hàng đợi nó sẽ gọi đến hàm gọi lại tương ứng với bảng điều khiển thực thi. nhật ký ['không đồng bộSau3 giây']
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à lý trước là buộc [đầu vào] để 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 bắt buộc thì chúng ta nên sử dụng các xử lý bất đồng bộ. Điều này sẽ giúp web chạy nhanh hơn. do nhiễu đồng thời được xử lý cùng 1 lúc
Cơ bản nhất mà bạn có thể hiểu khi tải tệp js hay css nếu để tải đồng bộ thì có thể sẽ phải đợi web của bạn khá lâu mới tải xong. Nhưng nếu load bất đồng bộ thì kết quả sẽ rất khả quan
Hết 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 đó.
– Tải API1 mất 2 giây
– Tải API2 mất 5 giây
– Tải API3 mất 6 giây
Nếu như các bạn để tải đồng bộ thì sẽ phải mất 2 + 5 + 6 = 13 giây sau khi các bạn mới xử lý để hiển thị màn hình. Nhưng nếu bạn để tải bất đồng bộ thi thì bạn chỉ mất khoảng 6 giây là đã tải xong tài nguyên
Chúng ta có thể biết rõ lợi thế khi sử dụng bất đồng bộ. Ở ví dụ trên các bạn cần chú ý rằng cả 3 api trên sẽ được tải bất kỳ bộ nào nhưng để màn hình hiển thị được hiển thị nếu bạn cần phải đợi cả 3 kết thúc API 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
Lời khuyên dành cho bạn là nếu cái gì xử lý không đồng bộ thì nên xử lý bất đồng bộ. Việc quản lý [sự kiện, tài nguyên] của bạn phức tạp hơn nhưng việc đổi lại lý của bạn sẽ nhanh hơn để xử lý nhiều đối tượng tương ứng.
MIÊNG TQ – CO-WELL Asia
Trên đây là các hướng dẫn từ cơ bản đến 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é