Vòng lặp sự kiện Javascript. Làm rõ cần

Question

Tôi đang đọc bài viết này:

http://blog.carbonfive.com/2013/10/27/the-javascript-event-loop-explained/

Có câu nói này:

"các chủ đề duy nhất thực hiện yêu cầu thời gian chạy để thực hiện một hoạt động , cung cấp một chức năng gọi lại và sau đó di chuyển Khi hoạt động đã được hoàn thành, một thông báo là được cung cấp cùng với chức năng gọi lại được cung cấp tại một số thời điểm trong tương lai, thông báo sẽ được giải quyết và cuộc gọi lại bị sa thải. "

Vì vậy, một ví dụ về những gì đang xảy ra ở đây trong tâm trí của tôi là thế này:

console.log("x") 
someAjaxCall(function({ 
callbackcode 
}) 
console.log("y") 

Câu hỏi:
1) someAjaxCall là hoạt động đúng và callbackcode là gọi lại?
2) Vì vậy, về cơ bản khi một sốAjaxCall được gọi, một thông điệp được enqueued trỏ đến callbackfunction chính xác? Sau khi console.log ("y") được gọi hoặc khi ngăn xếp được làm rỗng, thông báo sẽ bị hoãn lại và cuộc gọi lại/mã gọi lại được kích hoạt?

Sau đó có trích dẫn này:

"The tách của người gọi từ phản ứng cho phép runtime hoạt Javascript để làm những việc khác trong khi chờ đợi hoạt động không đồng bộ của bạn để hoàn thành và callbacks của mình để bắn."

3) Thời gian chạy là gì? Điều đó nghĩa là gì? Tôi chỉ nhận nó để có nghĩa là callstack có thể tiếp tục thực hiện và khi nó trống ... các thông điệp sau đó có thể dequeue?

Answer 1

Thời gian chạy Javascript là phần mềm thực thi tất cả mã Javascript. Điều này có nghĩa là trong khi Javascript đang chờ phản hồi cho cuộc gọi AJAX, nó có thể chạy những thứ khác. Ví dụ, bạn có thể hiển thị "Vui lòng chờ ..." với một spinner trong khi đợi máy chủ thực hiện truy vấn cơ sở dữ liệu dài. Khi nhận được phản hồi, cuộc gọi lại sẽ được thực thi, và nó có thể dừng trình quay và hiển thị dữ liệu.

Answer 2

Hãy suy nghĩ về động cơ Javascript như tìm kiếm một cái gì đó như thế này đằng sau hậu trường:

while(true) { 
    var event = updateUIAndDoNetworkingStuffAndWaitForIncomingEvent(); 
    if(event.hasJavaScriptHandler) { 
     event.runJavaScriptHandlerForEvent(); 
    } 
} 

Tại một số điểm, mã của bạn chạy. Bạn console.log("x"), chạy hàm someAjaxCall và sau đó chạy console.log("y"). Bên trong, someAjaxCall có thể đang sửa đổi một số trạng thái mà bạn không thể nhìn thấy cho trình duyệt “hey, khi bạn truy cập vào updateUIAndDoNetworkingStuffAndWaitForIncomingEvent, như một phần của 'làm công cụ mạng', cũng thực hiện yêu cầu HTTP này và khi bạn hoàn tất, hãy kích hoạt một sự kiện". Là một phần của bản ghi đó, nó lưu trữ chức năng gọi lại của bạn. Sau đó, một vài lần sau đó thông qua vòng lặp, updateUIAndDoNetworkingStuffAndWaitForIncomingEvent thấy rằng yêu cầu HTTP hoặc bất kỳ điều gì đã hoàn thành và nó trả về một sự kiện cho biết "này, yêu cầu HTTP mà bạn đã yêu cầu tôi thực hiện trước đây — tốt, nó đã hoàn thành!" sau đó nó nhận thấy rằng có một cuộc gọi lại nó được cất đi và gọi nó, và mã của bạn tiếp tục thực hiện bên trong cuộc gọi lại mà bạn đã chuyển đến someAjaxCall.