Xử lý bất đồng bộ trong javascript - phần 2

Đầ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ó”.

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ÌNH LUẬ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.