Hướng dẫn how does javascript event loop work? - vòng lặp sự kiện javascript hoạt động như thế nào?

Khái niệm thời gian chạy

Các phần sau đây giải thích một mô hình lý thuyết. Động cơ JavaScript hiện đại thực hiện và tối ưu hóa mạnh mẽ các ngữ nghĩa được mô tả.

Đại diện trực quan

Cây rơm

Các cuộc gọi chức năng tạo thành một chồng khung.

function foo(b) {
  const a = 10;
  return a + b + 11;
}

function bar(x) {
  const y = 3;
  return foo(x * y);
}

const baz = bar(7); // assigns 42 to baz

Thứ tự hoạt động:

1. Khi gọi bar, khung đầu tiên được tạo có chứa các tham chiếu đến các đối số và biến cục bộ của ____ 4.
2. Khi bar gọi foo, khung thứ hai được tạo và đẩy lên trên cái đầu tiên, chứa các tham chiếu đến các đối số và biến cục bộ của ____ 7.
3. Khi foo trả về, phần tử khung trên cùng được bật ra khỏi ngăn xếp (chỉ để lại khung cuộc gọi của ____ 4).
4. Khi bar trở lại, ngăn xếp trống.

Lưu ý rằng các đối số và biến cục bộ có thể tiếp tục tồn tại, vì chúng được lưu trữ bên ngoài ngăn xếp - vì vậy chúng có thể được truy cập bởi bất kỳ chức năng lồng nhau nào từ lâu sau khi hàm bên ngoài của chúng trở lại.

Đống

Các đối tượng được phân bổ trong một đống chỉ là một tên để biểu thị một vùng bộ nhớ lớn (chủ yếu là không cấu trúc).

Xếp hàng

Thời gian chạy JavaScript sử dụng hàng đợi tin nhắn, đây là danh sách các tin nhắn được xử lý. Mỗi tin nhắn có một chức năng liên quan được gọi để xử lý tin nhắn.

Tại một số thời điểm trong vòng lặp sự kiện, thời gian chạy bắt đầu xử lý các tin nhắn trên hàng đợi, bắt đầu với cái cũ nhất. Để làm như vậy, thông báo được xóa khỏi hàng đợi và chức năng tương ứng của nó được gọi với thông báo dưới dạng tham số đầu vào. Như mọi khi, gọi một hàm tạo ra một khung ngăn xếp mới cho việc sử dụng chức năng đó.

Việc xử lý các chức năng tiếp tục cho đến khi ngăn xếp một lần nữa trống. Sau đó, vòng lặp sự kiện sẽ xử lý thông báo tiếp theo trong hàng đợi (nếu có một).

Vòng lặp sự kiện

Vòng lặp sự kiện có tên của nó vì cách nó thường được thực hiện, thường giống với:event loop got its name because of how it's usually implemented, which usually resembles:

while (queue.waitForMessage()) {
  queue.processNextMessage();
}

while (queue.waitForMessage()) {
  queue.processNextMessage();
}

"Run-to-completion"

Mỗi tin nhắn được xử lý hoàn toàn trước khi bất kỳ tin nhắn nào khác được xử lý.

Điều này cung cấp một số thuộc tính tốt đẹp khi lý luận về chương trình của bạn, bao gồm cả thực tế là bất cứ khi nào một hàm chạy, nó không thể được ưu tiên và sẽ chạy hoàn toàn trước khi bất kỳ mã nào khác chạy (và có thể sửa đổi dữ liệu mà chức năng thao túng). Điều này khác với C, ví dụ, nếu một hàm chạy trong một luồng, nó có thể bị dừng tại bất kỳ điểm nào bởi hệ thống thời gian chạy để chạy một số mã khác trong một luồng khác.

Một nhược điểm của mô hình này là nếu một thông báo mất quá nhiều thời gian để hoàn thành, ứng dụng web không thể xử lý các tương tác của người dùng như nhấp hoặc cuộn. Trình duyệt giảm thiểu điều này với hộp thoại "A Script mất quá nhiều thời gian để chạy". Một thực tế tốt để làm theo là thực hiện xử lý tin nhắn ngắn và nếu có thể cắt giảm một tin nhắn thành một số tin nhắn.

Thêm tin nhắn

Trong các trình duyệt web, tin nhắn được thêm vào bất cứ lúc nào một sự kiện xảy ra và có một trình nghe sự kiện được đính kèm với nó. Nếu không có người nghe, sự kiện bị mất. Vì vậy, một cú nhấp chuột vào một phần tử với một trình xử lý sự kiện nhấp vào sẽ thêm một thông báo - tương tự như vậy với bất kỳ sự kiện nào khác.

Hàm

while (queue.waitForMessage()) {
  queue.processNextMessage();
}

while (queue.waitForMessage()) {
  queue.processNextMessage();
}

while (queue.waitForMessage()) {
  queue.processNextMessage();
}

Dưới đây là một ví dụ chứng minh khái niệm này (

while (queue.waitForMessage()) {
  queue.processNextMessage();
}

const seconds = new Date().getTime() / 1000;

setTimeout(() => {
  // prints out "2", meaning that the callback is not called immediately after 500 milliseconds.
  console.log(`Ran after ${new Date().getTime() / 1000 - seconds} seconds`);
}, 500)

while (true) {
  if (new Date().getTime() / 1000 - seconds >= 2) {
    console.log("Good, looped for 2 seconds");
    break;
  }
}

Không chậm trễ

Không chậm trễ không có nghĩa là cuộc gọi lại sẽ bị sa thải sau khi 0 mili giây. Gọi

while (queue.waitForMessage()) {
  queue.processNextMessage();
}

while (queue.waitForMessage()) {
  queue.processNextMessage();
}

Việc thực hiện phụ thuộc vào số lượng các nhiệm vụ chờ đợi trong hàng đợi. Trong ví dụ dưới đây, thông báo

while (queue.waitForMessage()) {
  queue.processNextMessage();
}

while (queue.waitForMessage()) {
  queue.processNextMessage();
}

while (queue.waitForMessage()) {
  queue.processNextMessage();
}

(() => {

  console.log('this is the start');

  setTimeout(() => {
    console.log('Callback 1: this is a msg from call back');
  }); // has a default time value of 0

  console.log('this is just a message');

  setTimeout(() => {
    console.log('Callback 2: this is a msg from call back');
  }, 0);

  console.log('this is the end');

})();

// "this is the start"
// "this is just a message"
// "this is the end"
// "Callback 1: this is a msg from call back"
// "Callback 2: this is a msg from call back"

Một số thời gian giao tiếp cùng nhau

Một nhân viên web hoặc một bộ phận có nguồn gốc chéo

const seconds = new Date().getTime() / 1000;

setTimeout(() => {
  // prints out "2", meaning that the callback is not called immediately after 500 milliseconds.
  console.log(`Ran after ${new Date().getTime() / 1000 - seconds} seconds`);
}, 500)

while (true) {
  if (new Date().getTime() / 1000 - seconds >= 2) {
    console.log("Good, looped for 2 seconds");
    break;
  }
}

const seconds = new Date().getTime() / 1000;

setTimeout(() => {
  // prints out "2", meaning that the callback is not called immediately after 500 milliseconds.
  console.log(`Ran after ${new Date().getTime() / 1000 - seconds} seconds`);
}, 500)

while (true) {
  if (new Date().getTime() / 1000 - seconds >= 2) {
    console.log("Good, looped for 2 seconds");
    break;
  }
}

const seconds = new Date().getTime() / 1000;

setTimeout(() => {
  // prints out "2", meaning that the callback is not called immediately after 500 milliseconds.
  console.log(`Ran after ${new Date().getTime() / 1000 - seconds} seconds`);
}, 500)

while (true) {
  if (new Date().getTime() / 1000 - seconds >= 2) {
    console.log("Good, looped for 2 seconds");
    break;
  }
}

Không bao giờ chặn

Một thuộc tính rất thú vị của mô hình vòng lặp sự kiện là JavaScript, không giống như nhiều ngôn ngữ khác, không bao giờ khối. Xử lý I/O thường được thực hiện thông qua các sự kiện và cuộc gọi lại, vì vậy khi ứng dụng đang chờ truy vấn IndexedDB để trả về hoặc yêu cầu XHR để trả về, nó vẫn có thể xử lý những thứ khác như đầu vào của người dùng.

Các ngoại lệ di sản tồn tại như

const seconds = new Date().getTime() / 1000;

setTimeout(() => {
  // prints out "2", meaning that the callback is not called immediately after 500 milliseconds.
  console.log(`Ran after ${new Date().getTime() / 1000 - seconds} seconds`);
}, 500)

while (true) {
  if (new Date().getTime() / 1000 - seconds >= 2) {
    console.log("Good, looped for 2 seconds");
    break;
  }
}

Xem thêm