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.
Trang 1Nộ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:
Trang 2• 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
Trang 3Ví 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()
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
Trang 426
27
• 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ộ
Trang 5function bar() {
console.log( 'bar' )
}
function baz() {
console.log( 'baz' )
}
function foo() {
setTimeout(function callback() { console.log( 'foo' )
}, 2000 )
bar()
baz()
}
foo()
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
Trang 626
27
28
29
30
• 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