HomeLập trìnhJavaScriptMô hình đồng...

Mô hình đồng thời JavaScript và vòng lặp sự kiện


Thời gian chạy Javascript là một luồng đơn, có nghĩa là nó có thể thực thi một đoạn mã tại một thời điểm. Để hiểu mô hình tương tranh và vòng lặp sự kiện trong Javascript, trước tiên chúng ta phải biết một số thuật ngữ phổ biến có liên quan đến nó.

ngăn xếp cuộc gọi

Trước tiên, hãy tìm hiểu về ngăn xếp cuộc gọi là gì.

Ngăn xếp cuộc gọi là một cấu trúc dữ liệu đơn giản ghi lại vị trí hiện tại của chúng tôi trong mã. Vì vậy, nếu chúng ta bước vào một chức năng là lời gọi hàm thì nó sẽ được đẩy vào ngăn xếp cuộc gọi. Khi chúng ta quay lại từ một chức năng, nó sẽ được bật ra khỏi ngăn xếp.

Hãy xem một ví dụ mã để hiểu ngăn xếp cuộc gọi:

function multiply(x,y) {
   return x * y;
}

function squared(n) {
     return multiply(n,n)
  }

function printSquare(n) {
   return squared(n)
}

let numberSquared = printSquare(5);
console.log(numberSquared);

Đầu tiên, khi mã thực thi, bộ thực thi sẽ đọc qua từng định nghĩa hàm. Nhưng khi nó đến dòng có chức năng đầu tiên in Vuông(5) được gọi, nó sẽ đẩy chức năng này vào ngăn xếp cuộc gọi.

Tiếp theo, chức năng này sẽ thực thi. Trước khi quay lại, nó sẽ gặp một chức năng khác, bình phương (n), vì vậy nó sẽ tạm dừng hoạt động hiện tại và đẩy chức năng này lên trên chức năng hiện có.

Nó thực thi hàm (trong trường hợp này là hàm bình phương) và cuối cùng nó gặp một hàm khác nhân(n,n). Sau đó, nó tạm dừng các thực thi hiện tại của nó và đẩy chức năng này vào ngăn xếp cuộc gọi. Hàm multi thực thi và nó trả về giá trị được nhân.

Đọc thêm  Trình xử lý sự kiện JavaScript – Cách xử lý sự kiện trong JS

Cuối cùng, hàm bình phương trả về và được bật ra khỏi ngăn xếp và sau đó, điều tương tự cũng xảy ra với printSquare. Giá trị bình phương cuối cùng được phân bổ cho biến numberSquared.

Chúng ta lại gặp một lời gọi hàm (trong trường hợp này là câu lệnh console.log()) để bộ thực thi đẩy hàm này vào ngăn xếp. Điều này thực thi nó do đó in số bình phương trên bàn điều khiển.

Lưu ý rằng chức năng đầu tiên được đẩy vào ngăn xếp trước khi bất kỳ mã nào ở trên chạy là chức năng chính. Trong thời gian chạy, điều này được biểu thị là một ‘hàm ẩn danh’.

Vì vậy, để tóm tắt: bất cứ khi nào một chức năng được gọi, nó sẽ được đẩy vào ngăn xếp cuộc gọi nơi nó thực thi. Cuối cùng, khi chức năng được thực hiện xong và đang trả về một cách ngầm định hoặc rõ ràng, nó sẽ được đưa ra khỏi ngăn xếp.

Ngăn xếp cuộc gọi chỉ ghi lại thời điểm chức năng đang thực thi. Và nó theo dõi chức năng nào hiện đang được thực thi.

Trình duyệt

Bây giờ chúng ta biết rằng Javascript có thể thực thi một thứ tại một thời điểm nhưng đó không phải là trường hợp của Trình duyệt. Trình duyệt có bộ API riêng như setTimeout và XMLHttpRequests không được chỉ định trong thời gian chạy Javascript.

Trên thực tế, nếu bạn xem qua mã nguồn của V8, thời gian chạy Javascript phổ biến cung cấp năng lượng cho các trình duyệt như Google Chrome, bạn sẽ không tìm thấy bất kỳ định nghĩa nào cho nó. Đó là bởi vì các API web đặc biệt này tồn tại trong môi trường trình duyệt chứ không phải trong môi trường javascript. Vì vậy, bạn có thể nói rằng các API này giới thiệu đồng thời vào hỗn hợp.

Đọc thêm  Hàm gọi lại JavaScript – Gọi lại trong JS là gì và cách sử dụng chúng

Hãy nhìn vào một sơ đồ để hiểu toàn bộ bức tranh.

Đồng thời và mô hình vòng lặp sự kiện

Một số thuật ngữ khác được giới thiệu ở đây, vì vậy hãy xem qua chúng:

đống: Nó chủ yếu là nơi các đối tượng được phân bổ.

Hàng đợi gọi lại: Đó là cấu trúc dữ liệu lưu trữ tất cả các cuộc gọi lại. Vì là một hàng đợi nên các phần tử được xử lý dựa trên FIFO là Nhập trước xuất trước.

Vòng lặp sự kiện: Đây là nơi tất cả những thứ này kết hợp với nhau. Vòng lặp sự kiện chỉ cần kiểm tra ngăn xếp cuộc gọi và nếu nó trống (có nghĩa là không có chức năng nào trong ngăn xếp) thì nó sẽ nhận cuộc gọi lại cũ nhất từ ​​hàng đợi gọi lại và đẩy nó vào ngăn xếp cuộc gọi để cuối cùng thực hiện cuộc gọi lại.

Hãy hiểu điều này với một ví dụ mã:

console.log('hi');

setTimeout(function() {
     console.log('freecodeCamp')
},5000);

console.log('JS')

Khi dòng đầu tiên thực thi, nó là console.log(). Đây là một lời gọi hàm có nghĩa là hàm này được đẩy vào ngăn xếp cuộc gọi nơi nó thực hiện in ‘hi’ ra bàn điều khiển. Cuối cùng, nó được trả lại và bật ra khỏi ngăn xếp.

Sau đó, khi thời gian chạy thực thi setTimeout(), nó sẽ biết rằng đây là API web. Do đó, nó cung cấp cho trình duyệt để xử lý việc thực thi của nó. Trình duyệt khởi động bộ đếm thời gian và sau đó thời gian chạy JS bật setTimeout() ra khỏi ngăn xếp. Nó gặp một lời gọi console.log() khác và do đó, nó đẩy lệnh này vào ngăn xếp cuộc gọi, thông báo ‘JS’ được đăng nhập vào bảng điều khiển và cuối cùng nó được trả về. Sau đó, console.log() cuối cùng được bật ra khỏi ngăn xếp. Bây giờ ngăn xếp cuộc gọi trống.

Đọc thêm  Ưu đãi và Hạn chế JavaScript

Trong khi đó, trong khi tất cả những điều này đang diễn ra thì bộ đếm thời gian kết thúc. Khi 5 giây trôi qua, trình duyệt sẽ tiếp tục và đẩy chức năng gọi lại vào hàng đợi gọi lại.

Tiếp theo, vòng lặp sự kiện kiểm tra xem ngăn xếp cuộc gọi có miễn phí hay không. Vì nó miễn phí nên nó nhận chức năng gọi lại và đẩy nó trở lại ngăn xếp cuộc gọi để thực thi mã bên trong nó.

Một lần nữa, bên trong mã có lệnh gọi console.log() để hàm này đi lên đầu ngăn xếp thực thi ghi nhật ký ‘freecodecamp’ vào bảng điều khiển và cuối cùng nó trả về. Điều này có nghĩa là nó được bật ra khỏi ngăn xếp và cuối cùng cuộc gọi lại được bật ra khỏi ngăn xếp và chúng ta đã hoàn thành.

Để hình dung điều này tốt hơn, hãy thử công cụ này của Phillip Roberts: Loupe Event Loop Visualizer



Zik.vn – Biên dịch & Biên soạn Lại

spot_img

Create a website from scratch

Just drag and drop elements in a page to get started with Newspaper Theme.

Buy Now ⟶

Bài viết liên quang

DMCA.com Protection Status