kiến thức Javascript cho người mới bắt đầu

digiaodo said:

4. Tất cả các async callback gọi bởi Web APIs (setInterval(), setTimeout()...) sẽ được cho vào callback queue. Có nghĩa là kể cả khi bạn dùng cái setTimeOut và truyền cho nó 1 callback kèm thời gian chờ bằng 0 thì callback đó vẫn được cho vào callback queue chứ ko phải là dự vào thời gian thực thi để đưa vào.

Có thể test thử đoạn code này để thấy:

JavaScript:

console.log(1);
setTimeout(() => console.log(2), 0);
console.log(3);
console.log(4);
console.log(5);
console.log(6);
console.log(7);
console.log(8);
console.log(9);
console.log(10);

Kết quả sẽ luôn là: 1 3 4 5 6 7 8 9 10 2 dù console.log(2) được set thời gian chờ là 0.

Click to expand...

setTimeout(() => console.log(0), 20);
console.log(1);
setTimeout(() => console.log(2), 0);
console.log(3);
console.log(4);
console.log(5);
console.log(6);
console.log(7);
console.log(8);
console.log(9);
console.log(10);

Dev cùi said:

Mình đóng góp như này
Quá trình compile code của javascript như sau.
1. Call stack: Call Stack là một cấu trúc dữ liệu dạng ngăn xếp (stack) dùng để chứa thông tin về hoạt động của chương trình máy tính trong lúc thực thi. Khi xảy ra lỗi sẽ nhìn thấy ở log, ví dụ như stack trace, stack overflow(xảy ra 1 vòng lặp quá kích thước tối đa của stack)
2. JavaScript Runtime: JS Runtime là browser's JS runtime environment. Và nó bao gồm những thành phần sau đây: Event loop, Web APIs, Callback Queue
3. Cơ chế event loop: Khi các dòng lệnh chuẩn bị thực thi thực thi. JS runtime sinh ra 1 sự kiện tên là Event Loop, sự kiện này được chạy trong suốt quá trình runtime. Sự kiện này đưa các dòng lệnh vào call stack, web APIs, Callback Queue
4. Cơ chế bất đồng bộ: Từ cơ chế event loop, Js run time có 1 bộ đếm timer(), hàm này giúp đếm thời gian thực thi của stack, nếu stack nào có sử dụng web APIs (setTimeout, xhr, connection, http request v.v.v) => bộ đếm timer sẽ lớn. event loop sẽ đưa stack đó vào Queue để thực thi và stack tiếp theo được thực hiện, sau khi stack có timer lớn thực hiện xong thì sẽ trả về kết quả ==> nguyên nhân vì sao xảy ra tình trạng bất đồng bộ.
Có gì sai xót các fen góp ý giúp

Click to expand...

Dev cùi said:

thì ý mình là các async callback được gọi bởi WebAPIs đều cho vào queue, nhưng chưa rõ vụ timer đúng ko fen? chỉ là nếu nhiều async callback sẽ sắp xếp queue đó theo thời gian.

JavaScript:

setTimeout(() => console.log(0), 20);
console.log(1);
setTimeout(() => console.log(2), 0);
console.log(3);
console.log(4);
console.log(5);
console.log(6);
console.log(7);
console.log(8);
console.log(9);
console.log(10);

Click to expand...

digiaodo said:

Cái hàm setTimeout hoạt động thế này, khi bạn gọi setTimeout kèm theo 1 cái callback function và 1 cái số thời gian X thì cái 1 cái timer sẽ chạy, khi timer chạy hết X thời gian xong thì callback function sẽ được đẩy vào callback queue nên cái nào bạn set thời gian ngắn hơn thì nó đẩy vào callback queue trước và được even loop lấy ra đưa lên call stack để chạy.

Còn với các web APIs khác, ví dụ XMLHttpRequest thì khi có kết quả nó sẽ đẩy vào callback queue chứ nó ko có cơ chế gì để dự đoán được thời gian thực thi mà sắp xếp callback queue đâu, theo mình biết là như vậy.

Click to expand...

luz.star said:

Sẵn đây thì cũng giúp ae trả lời câu hỏi phỏng vấn muôn thuở. Tại sao js là single-thread mà lại phổ biến với concept bất đồng bộ/asynchronous?

Lý do mình có giải thích ở trên, JS là single-thread và nó chạy sync + là một dạng ngôn ngữ thông dịch (execute line by line, cái này tranh cãi nhiều, nhưng quan điểm của mình nó là thông dịch).
Concept asynchronous, callback/promise/async-await được đề xuất nhằm một mục đích duy nhất là split long running task thành các task nhỏ hơn để tăng hiệu suất cho một ngôn ngữ single-thread như js. Và js chạy async được là do environment support (browser, node, etc). Tự thân nó chạy một mình thì define thêm mấy cái async/microtask/macro hoàn toàn không có ý nghĩa, vì nó vẫn sẽ phải chạy tuần tự (đơn luồng mà).

Mọi người hay nhầm về JS, single thread, asynchronous là do JS nó gắn với browser, nên nhiều lúc mọi người nhầm tưởng mấy cái của browser/environment là của JS. Một ví dụ điển hình là Promise.resolve() ở môi trường browser sẽ có behaviour khác môi trường node.

Click to expand...

digiaodo said:

Cái hàm setTimeout hoạt động thế này, khi bạn gọi setTimeout kèm theo 1 cái callback function và 1 cái số thời gian X thì cái 1 cái timer sẽ chạy, khi timer chạy hết X thời gian xong thì callback function sẽ được đẩy vào callback queue nên cái nào bạn set thời gian ngắn hơn thì nó đẩy vào callback queue trước và được even loop lấy ra đưa lên call stack để chạy.

Còn với các web APIs khác, ví dụ XMLHttpRequest thì khi có kết quả nó sẽ đẩy vào callback queue chứ nó ko có cơ chế gì để dự đoán được thời gian thực thi mà sắp xếp callback queue đâu, theo mình biết là như vậy.

Click to expand...

setTimeout(() => console.log(0), 20);
console.log(1);
setTimeout(() => console.log(2), 0);
console.log(3);
console.log(4);
console.log(5);
console.log(6);
console.log(7);
console.log(8);
console.log(9);
console.log(10);

Hello.World said:

các bác thấy js khó nhất là phần nào? cá nhân e trầy trật nhất phần asynchronus, lúc đầu tưởng nắm chắc e nó trong tay r đến khi bắt tay vào làm 1 cái website bán hàng đơn giản bằng nodejs + reactjs mới thấy lắm lúc hơi loạn.

Click to expand...