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.
Nội dung Để theo dõi tốt nhất, bạn nên xem qua bài: • • ECMAScript gì? Node.js gì? Bài giới thiệu nội dung sau: • • Bất đồng gì? Cơ chế hoạt động Javascript Bất đồng gì? Đầu tiên ta tìm hiểu lại xử lý đồng (Synchronous) gì? Nếu ta hiểu lập trình chắn biết khi dịng code hồn thành chạy dịng code tiếp theo, dịng code thực q lâu chương trình trạng thái chờ Trái với ý tưởng đồng phải chờ dòng code thực xong, bất đồng (Asynchronous) bỏ qua trạng thái chờ khơng cần thiết thực dịng code Ví dụ sau: Bạn vừa có tin nhắn, bạn gửi lại tin cho bạn mình, bạn bạn chưa phản hồi lập tức, bạn khơng cần phải chờ đợi người ta mà làm việc khác lướt news feed hay nhắn tin cho người khác, có tin rep lại xử lý tiếp Mặt tốt bất đồng giúp xử lý nhiều công việc xen kẽ với để tiết kiệm thời gian Mặt xấu làm chương trình viết phức tạp lên, ta phải hiểu rõ nguyên lý hoạt động bất đồng bộ, khơng dính trường hợp tiền đề chưa làm mà xử lý kết Cơ chế hoạt động Javascript Đầu tiên, Kteam giới thiệu qua thành phần sau xử lý phía Javascript: • • • • Call Stack: Vùng nhớ đặc biệt chip máy tính nhằm để phục vụ thực thi dòng lệnh (cụ thể hàm) Stack hàng đợi theo kiểu LIFO (Last In First Out) nghĩa vào cuối đầu Heap: vùng nhớ dùng để chứa kết tạm thời để thực thi hàm stack Callback Queue / Message Queue: dòng lệnh cần thời gian chờ, ta khai báo function callback xử lý sau dịng lệnh hồn thành Thì task đẩy vào Queue hàng đợi theo kiểu FIFO (First In First Out) có nghĩa vào trước xử lý trước Event Loop: giải thích đơn giản vịng lặp vơ tận, công việc lấy task từ Call Stack Callback Queue Đầu tiên xử lý CallStack trước, sau Call Stack trống kiểm tra Callback Queue để thực Ví dụ 1: thực code Javascript đồng function bar() { console.log('bar') } function baz() { console.log('baz') } function foo() { console.log('foo') bar() baz() } foo() 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 • Giải thích: theo chế call stack, hàm vào sau thực trước Khi gọi hàm foo, kiểm tra hàm nằm nó, có đưa hàm vào stack thực lại quay lại thực hàm phía Bạn xem ảnh gif để dễ hình dung • Nhận xét: Bởi Javascript thực thi single-thread, nói đơn giản lần thực thi dòng code, nên xử lý chương trình tạm thời block lại, có nghĩa thao tác web block Nếu thời gian block tính theo mili giây so với thao tác người dùng không đáng kể Nhưng thời gian block lên đến giây, lúc làm người dùng hiểu lầm trang web bị treo (lag), lúc ta cần phải sử dụng CallBack Queue để tránh tượng Ví dụ 2: thực code Javascript bất đồng function bar() { console.log('bar') } function baz() { console.log('baz') } function foo() { setTimeout(function callback() { console.log('foo') }, 2000) bar() baz() } foo() 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 • Giải thích: Kteam sử dụng hàm setTimeout để tạo hàm callback, hàm setTimeout báo trình duyệt chờ sau giây chạy hàm callback Thì sau hẹn giờ, Javascript tiếp tục thực hàm thường Sau giây hàm callback đẩy vào Callback Queue Khi Event Loop kiểm tra Call Stack khơng cịn hàm để xử lý, kiểm tra bên Callback Queue xem có hàm để xử lý khơng, có đẩy qua Call Stack để thực ... bị treo (lag), lúc ta cần phải sử dụng CallBack Queue để tránh tượng Ví dụ 2: thực code Javascript bất đồng function bar() { console.log('bar') } function baz() { console.log('baz') } function... thích: theo chế call stack, hàm vào sau thực trước Khi gọi hàm foo, kiểm tra hàm nằm nó, có đưa hàm vào stack thực lại quay lại thực hàm phía Bạn xem ảnh gif để dễ hình dung • Nhận xét: Bởi Javascript. .. CallStack trước, sau Call Stack trống kiểm tra Callback Queue để thực Ví dụ 1: thực code Javascript đồng function bar() { console.log('bar') } function baz() { console.log('baz') } function