Chia sẻ kiến thức về đồng bộ và không đồng bộ trong JavaScript

Đối với những ai đang bắt đầu tiếp cận với lĩnh vực lập trình, cụ thể là khía cạnh ngôn ngữ lập trình, có lẽ trong ngôn ngữ JavaScript, đồng bộ và không đồng bộ là những khái niệm tương đối “khó nhằn”.

Có thể giải thích một cách đơn giản rằng đồng bộ hóa là “hai hay nhiều thứ xảy ra cùng một lúc”, tất nhiên nếu chúng xảy ra vào những thời điểm khác nhau thì đó là không đồng bộ.

Bạn sẽ nhanh chóng nhận thấy rằng trong thực tế, những khái niệm này phức tạp và khó hiểu hơn bạn tưởng. “Thế nào là đồng bộ” và “thế nào là không đồng bộ” là những điều chúng ta cần xác định rõ ràng, chính xác tuyệt đối.

JavaScript – một ngôn ngữ lập trình xử lý không đồng bộ

Trong các ngôn ngữ chính của lập trình web hiện nay, JavaScript được coi là ngôn ngữ phổ biến nhất và cũng dễ sử dụng nhất. JavaScript làm cho trang web của chúng ta sinh động hơn thay vì chỉ chuyên về nội dung như HTML hoặc chuyên về phong cách như CSS. Khi ai đó đưa ra nhận xét rằng JavaScript là một ngôn ngữ lập trình không đồng bộ, họ đang đề cập đến bộ máy xử lý của JavaScript – cơ chế xử lý lần lượt gửi tin nhắn.

Một đặc điểm khác biệt của JavaScript là thay vì gọi hàm trực tiếp, nó sẽ được gọi thông qua tin nhắn. Hệ thống xử lý JavaScript bao gồm các thành phần sau: Hàng đợi tin nhắn, Vòng lặp sự kiện và Ngăn xếp cuộc gọi.

Hàng đợi tin nhắn Nó có nhiệm vụ nhận và lưu trữ các thông điệp, mỗi thông điệp trong hàng đợi tương ứng với một hàm được gọi.

Vòng lặp sự kiện thực hiện công việc điều động, lần lượt nhận các thông báo trong hàng đợi để xử lý. Event-Loop phải đợi đến khi xử lý xong tin nhắn trước thì nó mới tiếp tục lấy tin nhắn mới từ hàng đợi để xử lý, vòng lặp cứ liên tục và lặp lại như vậy cho đến khi hết tin nhắn chờ. trên hàng đợi Tin nhắn.

Cấu trúc dữ liệu ngăn xếp tốt Call Stack thực hiện xử lý tin nhắn, cụ thể với các chức năng giữ lời gọi hàm, quản lý việc thực thi hàm và gọi các hàm lồng nhau. Điều này có nghĩa là mỗi “thông báo” – “hàm được gọi” được Vòng lặp sự kiện truy xuất từ ​​Hàng đợi Thông báo và được Vòng lặp sự kiện xử lý sẽ tương ứng với một khung trên Ngăn xếp cuộc gọi, nếu hàm được gọi tiếp tục gọi các hàm con , các chức năng con sẽ lần lượt được thêm vào từng khung phía trên Call Stack. JavaScript sẽ lần lượt xử lý tất cả các vùng chứa cho đến khi không còn chức năng nào nữa, khi đó toàn bộ thông báo đã được xử lý. Bạn có thể hiểu rõ hơn về quy trình hoạt động qua hình vẽ sau:

Mình nghĩ bạn cần xem =>  Svchost là gì? Là thủ phạm chứa chấp virus và làm chậm máy tính của bạn?

Như trong hình trên, khi một tin nhắn mới được nhập vào hàng đợi Tin nhắn, quá trình thực hiện theo các bước: Tin nhắn được giữ trong hàng đợi, chờ Call Stack xử lý tất cả dữ liệu trong hàng đợi tin nhắn. tin nhắn trước đó, Event-loop quay lại lấy tin nhắn mới và đưa nó về Call Stack để xử lý, bổ sung các chức năng tương ứng với tin nhắn mới.

Một ví dụ khác sẽ hiện thực hóa điều này:

Khi mã trên được chạy, thông báo được gửi Hàng đợi tin nhắn là xử lý yêu cầu của chức năng quán ba (). Vòng lặp sự kiện Khi chúng ta thấy sự xuất hiện của tin nhắn, hãy chuyển đến Hàng đợi tin nhắn để nhận được tin nhắn đến Ngăn xếp cuộc gọi Để xử lý, tại Call stack sẽ có một khung tương ứng với thanh thông báo, hàm này tiếp tục gọi hàm con của nó – hàm foo () đến nên sẽ có một khung khác trong khung Call stack – foo, như một quy luật, luôn ở trên cùng. Sau đó, Call stack bắt đầu xử lý lần lượt 2 frame là foo và bar, hàm sẽ lần lượt bị loại bỏ khỏi stack ngay sau khi hoàn thành.

Giả sử một tin nhắn khác được gửi đến hàng đợi Tin nhắn, tin nhắn sẽ được giữ ở đó cho đến khi quá trình xử lý dữ liệu trên ngăn xếp Cuộc gọi hoàn tất trước khi tin nhắn này được Vòng lặp sự kiện chọn và gửi đi xử lý. tại Ngăn xếp cuộc gọi.

Như bạn thấy, trong JavaScript, chúng tôi không gọi hàm trực tiếp, chúng tôi thực hiện bằng cách gửi tin nhắn. Như vậy, thẻ ngôn ngữ không đồng bộ mà người ta gắn vào JavaScript thực chất là gọi tên cơ chế quản lý và xử lý dữ liệu của ngôn ngữ lập trình. Khái niệm về tính không đồng bộ nằm ở chỗ, ngay khi được gọi, hàm hoàn toàn không được thực thi mà phải đợi trong hàng đợi Message cho đến khi hàm trước đó được xử lý xong.

Điều gì về các chức năng không đồng bộ?

Qua những lý giải cơ bản trên, dường như bạn đã nắm được những thông tin cần thiết. Nhưng không, điều thú vị là “không phải mọi thứ trong ngôn ngữ đều không đồng bộ”. Nếu bạn đã xem, có thể bạn sẽ tự hỏi liệu các chức năng như setTimeout () hoặc là AJAX Cơ chế xử lý khác với quy trình vừa đưa ra. Vui lòng nghiên cứu thông tin về setTimeout () và AJAX trong phần này để hiểu rõ hơn:

Mình nghĩ bạn cần xem =>  7 tuyệt chiêu khắc phục lỗi 500 Internal Server Error nhanh chóng

setTimeout () là một hàm dùng để giới hạn lượng thời gian xử lý dữ liệu, hay nói cách khác, nếu bạn muốn thư bạn gửi được xử lý sau một khoảng thời gian nhất định thì bạn sử dụng hàm này. Cú pháp của setTimeout () như sau:

1 setTimeout (hàm, thời gian trễ, đối số …) ;

Tham số hàm: hàm xử lý.

Thời gian trì hoãn: thời gian trễ, đơn vị: mili giây.

Tranh luận: Đối số mà hàm của bạn gọi (tham số được truyền)

Hãy xem đoạn mã được chạy với yêu cầu: in dòng chữ “hey” sau 3 giây:

1 setTimeout (function () {console.log (“hey”), 3000);

Xử lý bản in ra “Chào“Sẽ không được thực hiện ngay lập tức vì có thời gian trễ là 3000 mili giây hoặc 3 giây, tại thời điểm này, đồng hồ bấm giờ với thời gian 3 giây được kích hoạt, trong khi đó, Ngăn xếp cuộc gọi vẫn tiếp tục xử lý” thông báo. “đến trước. Khi hết thời gian đếm ngược 3 giây, xử lý in” hey “trong Hàng đợi tin nhắn sẽ được xử lý bởi Vòng lặp sự kiện. Nếu lý do là, tin nhắn có in từ” này “phải đang chờ .

AJAX (JavaScript và XML không đồng bộ) là một khái niệm kỹ thuật sử dụng các API XMLHttpRequest (XHR) để thực hiện các yêu cầu tới máy chủ và xử lý các phản hồi được trả về.

Thông thường, nếu bạn không sử dụng XMLHttpRequest, khi bạn tạo yêu cầu gửi đến máy chủ, trang hiện tại sẽ được làm mới và tải lại toàn bộ giao diện để hiển thị nội dung mới. Bằng cách sử dụng AJAX, các yêu cầu gửi đi và phản hồi trả về được xử lý bởi API XHR, trang web vẫn có thể hiển thị nội dung mới mà không cần tải lại, giao diện người dùng không bị ảnh hưởng bởi bất kỳ hình ảnh nào. Tận hưởng những gì.

Vì vậy, mục đích cơ bản là tạo ra các yêu cầu mà không cần phải làm mới, tải lại trang web. Vậy “không đồng bộ” ở đây là do đâu? Sử dụng mã XHR không có nghĩa là nó là AJAX, vì thực tế thì API XHR có thể hoạt động theo cả hai cách: đồng bộ và không đồng bộ.

XHR được thiết kế theo mặc định để hoạt động không đồng bộ, khi một hàm sử dụng XHR để đưa ra yêu cầu, quá trình xử lý sẽ tiếp tục chạy thay vì chờ phản hồi từ máy chủ. Nếu chức năng được cấu hình để chạy đồng bộ, điều này có nghĩa là cần phải nhận phản hồi từ máy chủ để quá trình xử lý hậu kỳ tiếp tục.

Mình nghĩ bạn cần xem =>  CURL là gì? Dự án phần mềm mã nguồn mở cURL

Tiếp tục theo dõi 2 ví dụ dưới đây để hiểu rõ hơn về thông tin trên:

Ví dụ 1:

Trong ví dụ 1, không có ý nghĩa gì khi truy cập trực tiếp dữ liệu phản hồi sau send (), vì bản thân send () không đợi yêu cầu hoàn tất. Hãy nhớ rằng, như đã giải thích ở trên, XMLHTTPRequest theo mặc định được thiết kế để chạy không đồng bộ.

Ví dụ 2:

Trong ví dụ này, File hello.txt chỉ chứa văn bản đơn giản, thuộc tính phản hồi của XHR không hợp lệ nên văn bản sẽ không được in. Sau 1/1000 giây, XHR tự động thực hiện kiểm tra phản hồi và kích hoạt các sự kiện bổ sung cho trạng thái mà yêu cầu đi qua. Khi phản hồi được tải, XHR kích hoạt sự kiện onload để cung cấp đầu ra hợp lệ. Trong trường hợp chúng tôi muốn phản hồi được chạy đồng bộ, chúng tôi sẽ chuyển false thành đối số cuối cùng cho mở, cụ thể, hãy xem đoạn mã dưới đây:

Đây là hoạt động đồng bộ, bởi vì theo mặc định, đối số cuối cùng của mở là đúng, tức là đối số sai đang nhắc API XHR rằng nó phải chạy đồng bộ.

Theo Rapidsharefiles tổng hợp

✤ Top 20 bài viết Tổng Hợp mới nhất :

Xem thêm nhiều Tổng Hợp mới hay

Leave A Reply

Your email address will not be published.