Cơ chế bất đồng bộ trong Javascript
Sổ tay JavaScript
Danh sách bài học
Cơ chế bất đồng bộ trong Javascript
Dẫn nhập
Trong bài viết hôm nay, Kteam sẽ giải thích Cơ chế bất đồng bộ trong Javascript.
Nội dung
Để theo dõi bài này tốt nhất, bạn nên xem qua bài:
- ECMAScript là gì?
- Node.js là gì?
Bài này sẽ giới thiệu những nội dung sau:
- Bất đồng bộ là gì?
- Cơ chế hoạt động của Javascript
Bất đồng bộ là gì?
Đầu tiên ta sẽ tìm hiểu lại xử lý đồng bộ (Synchronous) là gì? Nếu như ta đã hiểu lập trình cơ bản thì chắc chắn biết là khi khi dòng code hoàn thành thì mới chạy dòng code tiếp theo, nếu dòng code đang thực hiện quá lâu thì chương trình đang ở trạng thái chờ.
Trái với ý tưởng đồng bộ phải chờ dòng code thực hiện xong, bất đồng bộ (Asynchronous) có thể bỏ qua trạng thái chờ nếu không cần thiết và thực hiện các dòng code tiếp theo. Ví dụ như sau: Bạn vừa có tin nhắn, bạn sẽ gửi lại tin cho bạn mình, có thể bạn của bạn chưa phản hồi ngay lập tức, bạn không cần phải chờ đợi người ta mà có thể làm việc khác như lướt news feed hay nhắn tin cho người khác,... khi nào có tin rep lại thì xử lý tiếp.
Mặt tốt của bất đồng bộ là giúp chúng ta xử lý nhiều công việc xen kẽ với nhau để tiết kiệm thời gian. Mặt xấu là làm chương trình mình viết phức tạp lên, và ta phải hiểu rõ nguyên lý hoạt động của bất đồng bộ, nếu không sẽ dính những trường hợp như cái tiền đề chưa làm mà đã xử lý cái kết quả.
Cơ chế hoạt động của Javascript
Đầu tiên, Kteam sẽ giới thiệu qua những thành phần sau được xử lý phía dưới Javascript:
- Call Stack: Vùng nhớ đặc biệt trên chip máy tính nhằm để phục vụ thực thi các dòng lệnh (cụ thể ở đây là các hàm). Stack là hàng đợi theo kiểu LIFO (Last In First Out) nghĩa là cái gì vào cuối thì ra đầu.
- Heap: vùng nhớ dùng để chứa kết quả tạm thời để thực thi các hàm trong stack.
- Callback Queue / Message Queue: khi các dòng lệnh cần thời gian chờ, ta sẽ khai báo các function callback xử lý sau khi dòng lệnh đó đã hoàn thành. Thì các task đó sẽ được đẩy vào đây. Queue là hàng đợi theo kiểu FIFO (First In First Out) có nghĩa cái gì vào trước là xử lý trước.
- Event Loop: có thể giải thích đơn giản là nó là một vòng lặp vô tận, và chỉ 1 công việc duy nhất là lấy các task từ Call Stack hoặc Callback Queue. Đầu tiên sẽ xử lý CallStack trước, sau khi Call Stack trống thì nó sẽ kiểm tra Callback Queue để thực hiện.
Ví dụ 1: thực hiện code Javascript đồng bộ
function bar() {
console.log('bar')
}
function baz() {
console.log('baz')
}
function foo() {
console.log('foo')
bar()
baz()
}
foo()
- Giải thích: theo cơ chế call stack, hàm vào sau thì sẽ thực hiện trước. Khi gọi hàm foo, nó sẽ kiểm tra các hàm nằm trong nó, nếu có thì đưa hàm con vào trong stack rồi thực hiện rồi lại quay lại thực hiện hàm phía dưới. Bạn có thể xem ảnh gif để dễ hình dung hơn.
- Nhận xét: Bởi vì Javascript chỉ thực thi single-thread, nói đơn giản là mỗi lần chỉ thực thi được 1 dòng code, nên khi đang xử lý thì chương trình tạm thời block lại, có nghĩa là không thể thao tác được trên web khi đang block. Nếu thời gian block tính theo mili giây thì so với thao tác người dùng không đáng kể. Nhưng nếu thời gian block lên đến từng giây, lúc đó làm người dùng hiểu lầm trang web đang bị treo (lag), lúc đó ta cần phải sử dụng CallBack Queue để tránh hiện tượng này.
Ví dụ 2: thực hiện code Javascript bất đồng bộ
function bar() {
console.log('bar')
}
function baz() {
console.log('baz')
}
function foo() {
setTimeout(function callback() {
console.log('foo')
}, 2000)
bar()
baz()
}
foo()
- Giải thích: Kteam sẽ sử dụng hàm setTimeout để có thể tạo ra 1 hàm callback, hàm setTimeout sẽ báo trình duyệt chờ sau 2 giây thì chạy hàm callback. Thì sau khi hẹn giờ, Javascript vẫn tiếp tục thực hiện các hàm tiếp theo như thường. Sau 2 giây thì hàm callback sẽ được đẩy vào Callback Queue. Khi Event Loop kiểm tra Call Stack không còn hàm để xử lý, nó sẽ kiểm tra bên Callback Queue xem có hàm nào để xử lý không, có thì đẩy qua Call Stack để thực hiện.
Kết
Như vậy Kteam đã giới thiệu về cơ chế bất đồng bộ trong Javascript
Ở bài tiếp theo, Kteam sẽ giới thiệu cho các bạn Node.js hoạt động như thế nào
Cảm ơn các bạn đã theo dõi bài viết. Hãy để lại bình luận hoặc góp ý của mình để phát triển bài viết tốt hơn. Đừng quên “Luyện tập – Thử thách – Không ngại khó”.
Tải xuống
Tài liệu
Nhằm phục vụ mục đích học tập Offline của cộng đồng, Kteam hỗ trợ tính năng lưu trữ nội dung bài học Cơ chế bất đồng bộ trong Javascript dưới dạng file PDF trong link bên dưới.
Ngoài ra, bạn cũng có thể tìm thấy các tài liệu được đóng góp từ cộng đồng ở mục TÀI LIỆU trên thư viện Howkteam.com
Đừng quên like và share để ủng hộ Kteam và tác giả nhé!
Thảo luận
Nếu bạn có bất kỳ khó khăn hay thắc mắc gì về khóa học, đừng ngần ngại đặt câu hỏi trong phần bên dưới hoặc trong mục HỎI & ĐÁP trên thư viện Howkteam.com để nhận được sự hỗ trợ từ cộng đồng.
Nội dung bài viết
Khóa học
Trong thời gian gần đây, JavaScript luôn là ngôn ngữ rất nhiều lập trình viên và sinh viên IT đang quan tâm và bàn tán vì tính linh hoạt, đa năng và cơ hội nghề nghiệp hấp dẫn mà ngôn ngữ này mang lại. Với sự phát triển nhanh các tính năng mới của JavaScript khiến nhiều người đang nghiên cứu cũng khó nhớ hết những tính năng và hiểu bản chất cụ thể của nó.
Thông qua khóa học SỔ TAY JAVASCRIPT, đây chỉ là những ghi chép mà Kteam tổng hợp như để có thể nghiên cứu lại khi cần thiết và giúp các bạn học hiểu được những tính năng JavaScript hiện nay.
video bài 3 bị lỗi r ạ
Bài viết rất hay ạ.Cảm ơn Anh rất nhiều ạ