Event loop Nodejs - Lần cuối giải thích cho những bạn còn NGHI NGỜ thông qua hai VÍ DỤ kinh điển

👉 Link khóa học backend Nodejs: / @anonystick
Event Loop Nodejs - Lần cuối giải thích cho những bạn còn NGHI NGỜ thông qua hai VÍ DỤ kinh điển
Không còn nghi ngờ gì nữa, mọi người đều biết rằng javascript là ngôn ngữ đơn luồng, điều đó có nghĩa là JS không thể đa luồng, nhưng chức năng không đồng bộ trong JS hoàn toàn có thể mô phỏng đa luồng và hiệu quả không tệ. Tất nhiên, nếu bạn muốn hiểu đầy đủ về sự không đồng bộ, trước tiên bạn phải hiểu cốt lõi của hoạt động JS - vòng lặp sự kiện (Event Loop), video sau đây mô phỏng sự hiểu biết về vòng lặp sự kiện theo ba phần:
1. Vì sao trong event loop lại nhắc đến macro task (task queue) và micro task (job queue)
2. macro task và micro task bao gồm những tác vụ nào?
3. 2 ví dụ để thấy event loop chạy như thế nào?
Timline:
00:00 Event loop là gì? Cốt lõi là gì?
04:50 Giải thích về macro task (task queue) và micro task (job queue)
12:30 2 ví dụ kinh điển để giải thích về event loop trong nodejs
🚩 Subscribe ➜ / tipsjavascript
#eventloop #nodejs #anonstick
✅ Follow Me:
Blog: anonystick.com
Github: github.com/anonystick/anonystick
Facebook: / tipjs
KZbin: / tipsjavascript

[@ucminhhoang2277]

Do phần giải thích em nghe microtask và macrotask bị nhầm lẫn nên mong được anh góp ý ạ Ở ví dụ level 1 em hiểu như sau: console.log('0') => được thực thi ngay lập tức => output : 0 hàm setTimeOut là macro-task => được đưa vào Macrotask queue khi script thực hiện tạo Promise thứ 1 => console.log('2') được thực thi => output : 0, 2 resolve trong Promise được thực thi bất đồng bộ => .then(3) được đưa vào Microtask queue tương tự với Promise thứ 2 => output: 0, 2, 4 .then(5) được đưa vào Microtask queue dòng console.log('6') được thực thi => output: 0, 2, 4, 6 lúc này V8 thực thi các task trong Microtask queue sau đó mới đến Macrotask => output: 0, 2, 4, 6, 3, 5, 1

[@_LuongQuocHao]

.then mới vô là micro hả bạn, v mà cứ tưởng Promise là vô rồi

[@lethitruc6794]

1:34 Tại sao js buộc phải là đơn luồng 2:56 V8 engine, memory heap - callstack 4:50 cơ chế thực thi js 9:32 mặc dù macro task được đưa vào task quêu trước nhưng program sẽ thực thi micro task trong job queue trước, sau đó mới thực thi macro task. Lưu ý: 1/trong macro task có micro task, và ngược lại. 2/ general task (ko thuộc 2 queue trên) luôn được thực thi trước hoặc sau mirco task nếu có

[@anonystick]

chu cha. Tks em, quá chi tiết.

[@user-rf9jp6ez7w]

cảm ơn anh ❤

[@jasonnguyen128]

Video bổ ích quá, cảm ơn anh rất nhiều.

[@anonystick]

cảm ơn em nhiều hén

[@KieuLe-vt7vy]

cảm ơn a; 💚💚💚

[@sangtruongtuan4357]

Những chia sẻ bổ ích của anh bổ ích lắm ạ. Em chúc anh và gia đình nhiều sức khỏe ^^

[@anonystick]

Cảm ơn em đã đồng hành!

[@techmaverick89]

Bài giảng rất hay và dễ hiểu ạ.

[@anonystick]

Cảm ơn em

[@zigzig0609]

Hay qua bác

[@anonystick]

Tks em

[@MrZr-iw7mq]

Cảm ơn anh, giải thích rất dễ hiểu ạ. Lúc trước e đọc tài liệu phải mất mấy ngày hehe

[@anonystick]

Tks em

[@hiennnhatt]

Thankiiu chú nhiều, con thấy hầu hết tài liệu chỉ nói đến event loop với callback queue mà rất ít tài liệu nói đến microtask với macrotask hay job queue với task queue.

[@anonystick]

Uhm Anh đọc trên net cũng mông lung lúc thanh xuân lắm

[@trantuananh4456]

micro voi macro anh phát âm giống nhau , hơi khó hình dung

[@vuduyanh7791]

.then sẽ trả về promise nên kq ... , then1, then2, 6 , vì trong micro task các .then sẽ đc sắp sếp theo thứ tự, như đoạn code trên còn gọi là promise chaining

[@DucLe-sh2nl]

cho mình hỏi nếu sử dụng promise.all có 5 promise bên trong đều dùng để fetch api thì bên trong microtask, promise.all này có hoạt động như promise bình thường không ạ, có phải là nó sẽ đợi khi cả 5 promise này fetch xong hoàn toàn rồi mới trả về call stack không ạ?

[@_Hnib.Tv_]

híp mà add cứ đọc help :))

[@SangNguyen-pq7ok]

anh ơi, em đọc trên document thì chỉ thấy 6 phases của nó, không nhắc đến macrotask hay microtask, không biết 6 phases đấy với 2 thằng này liên hệ với nhau như thế nào ạ?

[@tristheflash6928]

6 phase này trong event loop là cách giải thích khi một task chạy vào nó sẽ đi qua 6 phase đó nhưng ko phải bất kì phase nào cx phải thực hiện trong event loop một số phase sẽ bị bỏ qua nếu không có queue tương ứng

[@congnamle3632]

Cho em hỏi là phần chuyên sâu này mình đọc trên document hay minh phải tự tìm hiểu ạ? Em cũng đang là dev Nodejs nhưng những phần chuyên sâu này tìm hiểu chưa tới được như này ạ

[@anonystick]

Đúng rồi em, và kinh nghiệm nữa hen.

[@congnamle3632]

@@anonystick Em cảm ơn anh

[@cryptoman525]

Cái này là event loop của js chứ nhỉ. Event loop của nodejs e thấy chia thành các phase đúng k ad

[@trunghieuhoang3839]

Mình cũng nghĩ thế, đây là cơ chế event loop của browser không phải event loop của NodeJS

[@hoctran3328]

micro với macro anh nói hơi khó nghe ạ, anh có thế đọc macro là (mác - cro) còn micro là (mai - cro)

[@anonystick]

Tks em nhiều hen.

[@ngochoang11906]

Chú Tipjs ơi cho cháu hỏi với mã sau: const foo = () => console.log("First"); const bar = () => setTimeout(() => console.log("Second"), 500); const baz = () => console.log("Third"); bar(); foo(); baz(); Khi cháu chạy thì in ra lần lượt là: // First // Third // undefined // Second Cháu chưa hiểu sao lại in ra được undefined. mong chú giải đáp ❤

[@anonystick]

Code em tương đương anh viết ra vậy cho em dễ hiểu: ``` const foo = () => console.log("First"); const bar = () => setTimeout(() => { console.log("Second"); return undefined; }, 500); const baz = () => console.log("Third"); bar(); foo(); baz(); ``` nhưng em thay return undefined = bao nhiêu cũng là undefined. Giá trị undefined em thấy trong đầu ra tương ứng với giá trị trả về của `setTimeout ` chính hàm đó, không phải giá trị trả về của callback.

[@ngochoang11906]

@@anonystick Cháu cảm ơn ạ ❤️

[@PhongTran-rp1rd]

​@@anonystickgiá trị trả về của settimrout luôn là undefined nhỉ anh ơi

[@user-tz6vk8cn8g]

chắc bạn chay trên browser devTool

[@quankhiloac7quankhic730]

khóc. nghe có vẻ hiểu đoán số in đúng nhưng kết luận là không hiểu.

[@glorynt7925]

đoạn đầu mình tưởng new Promise là hàm bất đồng bộ nên nó chạy 4 trước rồi mới 2.

[@anonystick]

Js đểu lắm kakka

[@phucpham41]

Bản chất Promise là 1 hàm callback với 2 tham số đầu vào là 2 hàm callback, tham số thứ nhất tượng trưng cho hàm nhận vào giá trị 'khi hệ thống xảy ra lỗi', tham số thứ 2 tượng trưng cho hàm nhận vào giá trị 'khi hệ thống thành công'. và Promise cũng là định nghĩa kết quả trả về khi thực thi hàm bất đồng bộ. Khi 'new Promise' là lúc khởi tạo thì nó như là 1 callback func -> xếp chúng vào callStack. Promise có 3 trạng thái: 1. Peding - là khi 'new Promise' -> hệ thống khởi tạo 1 callback function. Mọi thứ diễn ra bên trong Promise là đồng bộ, đến khi kết quả hệ thống fulfill hoặc reject. 2. Fulfilled - khi resolve callback nhận giá trị khi hệ thống fulfil -> resolve(fulfil) -> lúc này là 1 microTask 3. Rejected - khi reject callback nhận giá trị khi hệ thống reject -> reject(reject) -> lúc này là 1 microTask Đơn giản thì hiểu nó là 1 callback function, khái niệm Promise sinh ra để thay thế vấn đề callback hell gặp phải.

[@glorynt7925]

@@phucpham41 nhưng nó gặp phải callBack thì nó phải đưa qua bên xếp hàng bên webapi rồi chờ những cái hàm không bất đồng bộ làm việc xong rồi mới đẩy mấy đống callback lên làm việc tiếp chứ, ở đây console.log(4) là đồng bộ nên chạy trước, mình có nhầm lẫn chỗ nào không

[@glorynt7925]

@@phucpham41 mình không thấy cmt của bạn

[@anhthuan5214]

@@glorynt7925 Thật ra nó như vầy nè bạn : Từ khóa new là tạo ra instance của hàm Promise, và trong instance đó chứa 2 hàm callback là resolve và reject. Khi bạn tạo new Promise hoặc Promise.resolve() thì nó vẫn là code Đồng Bộ. Cho nên đoạn console.log(‘2’) nó vẫn là Code Đồng Bộ và log số 2 ra trước. Tiếp tục chạy xuống đoạn Code Đồng Bộ dòng console.log(`4`) và log số 4 sau số 2. Còn trường hợp khi mà .then() thì hàm then là hàm Bất Đồng Bộ -> nó sẽ được đưa vào Job Queue (Micro Task Queue) Khi Call Stack trống thì nó mới nhảy vào và log ra số 3. Tương tự như vậy ở đoạn dưới và kết quả như trên video.

[@nguyenlehaii]

Call stack: LIFO (last in first out)

[@remixmusichot4687]

new Promise((res, rej) => { console.log('0'); res(1) }).then(val => console.log(val)).then(() => console.log('t1')) new Promise((res, rej) => { console.log('2'); res(3) }).then(val => console.log(val)).then(() => console.log('t2')) bot explained :v However, it's important to note that even though the second then() method is chained to the first then() method of the first promise, it is still a separate micro task that is added to the micro task queue. This means that it is not executed immediately after the first then() method completes, but rather after all other micro tasks that were scheduled before it have been executed. In the code example, the first then() method of the first promise logs "1" to the console, which is a micro task that is executed immediately after the promise resolves. The second then() method of the first promise, which logs "t1" to the console, is then added to the micro task queue.

[@lethitruc6794]

anh cho em hỏi kiến thức này nằm trong sách nào vậy ?

[@anonystick]

Kinh nghiệm anh thôi em...

[@lethitruc6794]

@@anonystick dạ, ít ra phải dựa vào nguồn tài liệu nào để biết xử lý, dk anh ?

[@anonystick]

@@lethitruc6794 Có trang này học js hay em nha. javascript.info/

[@ngochientran5711]

0, 2, 4, 6, 3, 5,then..1,then...2, 1

[@sangtruongtuan4357]

Mình nghĩ sau khi chương trình tổng thể hoạt động xong sẽ đến thực thi hàng đợi Job Queue. Các trạng thái thay đổi của Job Queue (JQ) lần lượt là: 1. Sau khi thực thi Promise ở dòng 34, JQ: P1 2. Sau khi thực thi Promise ở dòng 43, đẩy Promise vào sau nên JQ: P1->P2 3. Sau khi thực thi hết các tập lệnh trong chương trình tổng thể (kết thúc ở dòng 52), chuyển qua thực thi JQ nên thực thi P1: Lấy P1 ra khỏi JQ và do ở dòng 37 nên tạo ra 1 Promise P3. Thêm P3 vào JQ. Khi đó, JQ: P2->P3. 4. Tương tự bước 3, thực thi P2 tạo ra P4 nên JQ: P3->P4. 5. Thực thi P3 thì in ra "then..1", JQ lúc này còn lại P4. 6. Thực thi P4 thì in ra "then..2", JQ hết task để thực hiện nên chuyển qua macro-task. Nếu chia sẻ của mình có chi thiếu sót, mong bạn góp ý ạ.

[@anhthuan5214]

@Vu Nguyen Hiểu đơn giản là khi bạn .then() thì hàm then là hàm Bất Đồng Bộ --> nó sẽ nhảy vào Job Queue ( Micro Task Queue ). Sau đó nó đợi các lệnh đồng bộ chạy hết khi đó Call Stack trống thì mới được đưa vào và log ra then-1 và then-2 theo thứ tự là số 3 và 5. Sau khi tất cả Job Queue ( Micro Task Queue ) chạy xong và Call Stack trống thì hàm setTimeout() ban đầu được đưa vào Task Queue ( Macro Taske Queue ) sẽ nhảy vào Call Stack và log ra số 1 cuối cùng.