Nội dung bài viết
Video học lập trình mỗi ngày
Đối với những ai đang theo con đường javascript (reacjs, nodejs, angularjs...) đều phải cần hiểu sâu sắc về khía cạnh Event Loop trong javascript.
Tôi dám chắc nhiều developer có nhiều kinh nghiệm làm việc cũng không dám vỗ ngực đứng lên và nói rằng có thể hiểu sâu về Event Loop trong javascript.
Event loop là gì?
Ngay cả chính bản thân người viết vẫn còn mơ hồ về điều này mặc dù đã đọc rất nhiều bài viết về Event Loop.
Thật sự mà nói có rất nhiều bài viết mà tôi đã đọc về các cách thích của các chuyên gia javascript nhưng tôi vẫn chưa tường mình, nhưng một ngày lướt qua một bài viết "Visualising the JavaScript Event Loop with a Pizza Restaurant analogy" và tôi đã hiểu nhiều hơn. Nay xin phép share cho các bạn với ngôn ngữ mẹ đẻ của mình =]].
Và đừng nói với tôi rằng bạn cũng chưa biết về stack, queue. Nếu chưa rõ các bạn có thể đọc thêm về Stack Và Queue Trong Cấu Trúc Dữ Liệu Javascript.
Tìm hiểu về Event loop thông qua Nhà hàng Pizza.
Đầu tiền chúng ta xem xét quy trình một nhà hàng làm pizza.
Vào một ngày đẹp trời nhà hàng pizza tiếp một khách hàng khó tính đó là Anonystick (nếu bạn chưa biết về anh ta thì click vào)
Anh ta đặt hai loại một pizza và một bánh mỳ.
Pizza: Là một loại bánh rất công phu đòi hỏi phải có dầu oliu phủ lên trên(1), đổ đầy phô mai(2), và có đế cứng(3).
Bánh mỳ: là loại đơn giản hơn đó là xốt cà chua(a), và tỏi, thịt bằm(b)
Đầu bếp khi nhận order và bắt đầu làm chiếc bánh pizza đầu tiên bằng cách lấy một đế lớn (3), thêm phần phô mai vào bên trong (2), sau đó thêm lớp phủ ô liu (1) ở trên mặt bánh.
Sau đó Đầu bếp làm chiếc bánh mỳ tiếp theo.
Đột nhiên người quản lý nhà hàng phát hiện rằng nguyên liệu cà chua không có.
Và người quản lý này add "lấy cà chua" vào task trong chart của nhà hàng và sai một thằng bé đi mua nó về từ siêu thị gần đó.
Về mặt kỹ thuật, khách hàng muốn 2 món lên đồng thời cùng nhau thì khách hàng sẽ phải đợi cho đến khi một cậu bé lặt vặt đi đến siêu thị, và mua cà chua và đưa cho đầu bếp để hoàn thành đơn hàng.
Nhưng đây là một nhà hàng và khách hàng không cần thiết phải ăn một lúc 2 món một lần.
Và người đầu bếp quyết định tiếp tục làm pizza và nướng đưa lên cho khách hàng ăn trước, trong khi khách hàng đang thưởng thức chiếc bánh pizza thì, cậu bé đã đưa cà chua về và chiếc bánh mỳ cũng hoành thành từ người đầu bếp. Và vị khách hành đó cũng không phàn nàn gì về nhà hàng này.
Event loop trong javascript thực hiện như thế nào?
- Khách hàng gọi hai món (pizza + bánh mỳ) chính là function trong javascript.
- Các chi tiết về các món pizza và bánh mì, và chúng có thể được coi là các chức năng (function) được gọi là bên trong của Pizza - và thứ tự được thực hiện bởi đầu bếp như phủ dầu oliu, phô mai và kích thước. Các chi tiết này về cơ bản chính là Call Stack, thực hiện tất cả các sự kiện này theo thứ tự ngược lại.
- Sự thiếu sót cà chua từ nhà hàng - đó là một Event được kích hoạt và được gọi là asynchronous function (đọc thêm sires về async tại đây ), đó là lấy cà chua từ siêu thị. Vì nhà hàng không cần phải làm toàn bộ đơn đặt hàng cùng nhau, họ hoàn thành các nhiệm vụ trong Call Stack cuộc gọi theo thứ tự ngược lại, như ngụ ý ở trên trong câu chuyện trên.
- Người quản lý ở đây là event table - công việc của anh ta là theo dõi tất cả các rủi ro (Events) xảy ra, theo thứ tự thời gian. Cậu bé ở đây chính là event queue, queue nghĩa là phải chờ cậu bé hoàn thành rồi mới giao việc khác cho cậu bé.
- Đầu bếp ở đây chính là Event Loop, có nhiệm vụ liên tục thực hiện các đơn đặt hàng (thực hiện tất cả các chức năng - executing all the functions).
- Nhà hàng ở đây chính là một trình duyệt browser.
Kết luận:
Vì vậy, về bản chất, vòng lặp sự kiện(event loop) sẽ kiểm tra xem ngăn xếp(call stack) cuộc gọi có trống không và nếu có, sẽ xem xét hàng đợi sự kiện (event queue).
Nếu có một cái gì đó trong đó, nó thêm nó vào ngăn xếp(call stack) cuộc gọi và thực hiện nó.
Vòng lặp sự kiện(event loop) liên tục chạy cho đến khi hết ca (nội dung trình duyệt được tải / trình duyệt bị đóng). Event table theo dõi tất cả các sự kiện đã được kích hoạt và gửi chúng đến hàng đợi sự kiện(event queue) sẽ được thực thi.
Mình hy vọng rằng các bạn đọc xong và nhận ra rằng hiểu theo cách giải thích này mình sẽ hiểu sâu hơn về Event Loop. Hiểu môi trường mà chương trình của bạn chạy có thể làm tăng đáng kể hiệu quả và hiệu quả của bạn với tư cách là nhà phát triển. Nó nêu bật logic là tại sao một chương trình nhất định hoạt động theo cách nó làm.
Tham khảo về async/callback, stack, queue.
https://anonystick.com/tag/series%20callback%20javascript
