Con hiểu và xin cảm ơn chú về bài giảng. Con xin phép được trả lời bài giảng cuối của chú, nhưng hiện tại con đang gặp khó khăn và chưa hiểu rõ về thứ tự xử lý trong macro task. Mong chú có thể giúp con giải đáp thắc mắc này ạ. Dưới đây là câu trả lời của con: - Giai đoạn 1 (con xin phép gọi theo cách hiểu của con ạ: xử lý "top-level code"): 1. console.log('0'); 2. setTimeout được đẩy vào hàng đợi (Macrotask 1 - sẽ được xử lý ở giai đoạn cuối). 3. Thực thi new Promise, in ra console.log('2') và gọi resolve(3) (đưa .then vào Microtask 1 và sẽ xử lý ở Giai đoạn 2). 4. Thực thi new Promise, in ra console.log('4') và gọi resolve(5) (tiếp tục đưa .then vào Microtask 1, xử lý ở Giai đoạn 2). 5. console.log('6'); - Giai đoạn 2 (xử lý Microtask 1): 1. In giá trị console.log(val) (lần thứ nhất), sau đó .then được đẩy vào Microtask 2 (sẽ xử lý ở Giai đoạn 3). 2. In giá trị console.log(val) (lần thứ hai), tiếp tục đưa .then vào Microtask 2 (sẽ xử lý ở Giai đoạn 3). - Giai đoạn 3 (xử lý Microtask 2): 1. console.log('then ... 1'); 2. console.log('then ... 2'); - Giai đoạn cuối (xử lý Macrotask): 1. console.log('1'); => Output dự kiến: 0 2 4 6 3 5 then ... 1 then ... 2 1
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
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.
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 ❤
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.
.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
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 ạ?
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 ạ?
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
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 ạ
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.
@@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 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.
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.
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 ý ạ.
@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.
dạ hay quá anh ơi
Con hiểu và xin cảm ơn chú về bài giảng. Con xin phép được trả lời bài giảng cuối của chú, nhưng hiện tại con đang gặp khó khăn và chưa hiểu rõ về thứ tự xử lý trong macro task. Mong chú có thể giúp con giải đáp thắc mắc này ạ.
Dưới đây là câu trả lời của con:
- Giai đoạn 1 (con xin phép gọi theo cách hiểu của con ạ: xử lý "top-level code"):
1. console.log('0');
2. setTimeout được đẩy vào hàng đợi (Macrotask 1 - sẽ được xử lý ở giai đoạn cuối).
3. Thực thi new Promise, in ra console.log('2') và gọi resolve(3) (đưa .then vào Microtask 1 và sẽ xử lý ở Giai đoạn 2).
4. Thực thi new Promise, in ra console.log('4') và gọi resolve(5) (tiếp tục đưa .then vào Microtask 1, xử lý ở Giai đoạn 2).
5. console.log('6');
- Giai đoạn 2 (xử lý Microtask 1):
1. In giá trị console.log(val) (lần thứ nhất), sau đó .then được đẩy vào Microtask 2 (sẽ xử lý ở Giai đoạn 3).
2. In giá trị console.log(val) (lần thứ hai), tiếp tục đưa .then vào Microtask 2 (sẽ xử lý ở Giai đoạn 3).
- Giai đoạn 3 (xử lý Microtask 2):
1. console.log('then ... 1');
2. console.log('then ... 2');
- Giai đoạn cuối (xử lý Macrotask):
1. console.log('1');
=> Output dự kiến: 0 2 4 6 3 5 then ... 1 then ... 2 1
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
.then mới vô là micro hả bạn, v mà cứ tưởng Promise là vô rồi
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
Tks em
Call stack: LIFO (last in first out)
Bài giảng rất hay và dễ hiểu ạ.
Cảm ơn em
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 ^^
Cảm ơn em đã đồng hành!
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ó
chu cha. Tks em, quá chi tiết.
Video bổ ích quá, cảm ơn anh rất nhiều.
cảm ơn em nhiều hén
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.
Uhm Anh đọc trên net cũng mông lung lúc thanh xuân lắm
anh cho em hỏi kiến thức này nằm trong sách nào vậy ?
Kinh nghiệm anh thôi em...
@@anonystick dạ, ít ra phải dựa vào nguồn tài liệu nào để biết xử lý, dk anh ?
@@lethitruc6794 Có trang này học js hay em nha. javascript.info/
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 ❤
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.
@@anonystick Cháu cảm ơn ạ ❤️
@@anonystickgiá trị trả về của settimrout luôn là undefined nhỉ anh ơi
chắc bạn chay trên browser devTool
Hay qua bác
Tks em
.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
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 ạ?
cảm ơn anh ❤
cảm ơn a; 💚💚💚
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 ạ?
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
micro voi macro anh phát âm giống nhau , hơi khó hình dung
khóc. nghe có vẻ hiểu đoán số in đúng nhưng kết luận là không hiểu.
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 ạ
Đúng rồi em, và kinh nghiệm nữa hen.
@@anonystick Em cảm ơn anh
híp mà add cứ đọc help :))
đ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.
Js đểu lắm kakka
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.
@@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
@@phucpham41 mình không thấy cmt của bạn
@@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.
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)
Tks em nhiều hen.
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
Mình cũng nghĩ thế, đây là cơ chế event loop của browser không phải event loop của NodeJS
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.
0, 2, 4, 6, 3, 5,then..1,then...2, 1
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 ý ạ.
@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.