Hiểu về đồng bộ và không đồng bộ trong JavaScript - Phần 2
Trong phần đầu tiên của bài viết này, chúng tôi đã thấy khái niệm về đồng bộ và không đồng bộ được nhận thức trong JavaScript. Trong phần thứ hai này, Mr X xuất hiện một lần nữa để giúp chúng tôi hiểu cách setTimeout và AJAX API công việc.
Một yêu cầu kỳ lạ
Hãy quay lại câu chuyện về Mr X và bộ phim mà bạn muốn để lại. Giả sử bạn để lại một nhiệm vụ cho Mr X trước khi đi chơi, và nói với anh ta rằng anh ta chỉ có thể bắt đầu thực hiện nhiệm vụ này năm giờ sau anh ấy đã nhận được tin nhắn của bạn.
Anh ấy không hài lòng về điều đó, hãy nhớ rằng, anh ấy không nhận được một tin nhắn mới cho đến khi anh ấy hoàn thành với tin nhắn hiện tại và nếu anh ấy lấy của bạn, anh ấy phải chờ số năm giờ để thậm chí bắt đầu vào nhiệm vụ. Vì vậy, để không lãng phí thời gian, anh mang đến một người trợ giúp, Anh H.
Thay vì chờ đợi, anh ta yêu cầu ông H để lại một tin nhắn mới cho nhiệm vụ trong hàng đợi sau khi số giờ đã cho trôi qua và chuyển sang tin nhắn tiếp theo.
Năm giờ qua; Anh H cập nhật hàng đợi với một tin nhắn mới. Sau khi xử lý xong tất cả các tin nhắn tích lũy trước ông H, ông X thực hiện nhiệm vụ bạn yêu cầu. Vì vậy, theo cách này, bạn có thể để lại một yêu cầu tuân thủ sau đó, và không đợi đến khi nó hoàn thành.
Nhưng tại sao ông H lại để lại tin nhắn trong hàng đợi thay vì liên lạc trực tiếp với ông X? Bởi vì như tôi đã đề cập trong phần đầu tiên, chỉ có cách để liên lạc với Mr X là bằng cách để lại lời nhắn cho anh ấy qua cuộc gọi điện thoại - không có ngoại lệ.
1. setTimeout () phương pháp
Giả sử bạn có một bộ mã mà bạn muốn thực hiện sau một thời gian nhất định. Để làm điều đó, bạn chỉ cần bọc nó trong một chức năng, và thêm nó vào setTimeout () phương pháp cùng với thời gian trễ. Cú pháp của setTimeout () là như sau:
setTimeout (chức năng, thời gian trễ, argio)
Các argio tham số là viết tắt của bất kỳ đối số nào mà hàm lấy và thời gian trì hoãn sẽ được thêm vào trong một phần nghìn giây. Dưới đây bạn có thể thấy một ví dụ mã đơn giản, đầu ra “Chào” trong bảng điều khiển sau 3 giây.
setTimeout (function () console.log ('hey'), 3000); Một lần setTimeout () bắt đầu chạy, thay vì chặn ngăn xếp cuộc gọi cho đến khi thời gian trì hoãn được chỉ định kết thúc, một hẹn giờ được kích hoạt, và ngăn xếp cuộc gọi dần dần được làm trống cho tin nhắn tiếp theo (tương tự như sự tương ứng giữa Mr X và Mr H).
Khi hết giờ, một tin nhắn mới tham gia hàng đợi, và vòng lặp sự kiện sẽ nhận nó khi ngăn xếp cuộc gọi miễn phí sau khi xử lý tất cả các tin nhắn trước nó - do đó mã chạy không đồng bộ.
2. AJAX
AJAX (JavaScript không đồng bộ và XML) là một khái niệm sử dụng XMLHttpRequest (XHR) API để yêu cầu máy chủ và xử lý các câu trả lời.
Khi trình duyệt thực hiện các yêu cầu máy chủ mà không sử dụng XMLHttpRequest, làm mới trang và tải lại giao diện người dùng của nó. Khi việc xử lý các yêu cầu và phản hồi được xử lý bởi API XHR và UI vẫn không bị ảnh hưởng.
Vì vậy, về cơ bản, mục tiêu là thực hiện các yêu cầu mà không cần tải lại trang. Bây giờ, ở đâu “không đồng bộ” trong này Chỉ sử dụng mã XHR (mà chúng ta sẽ thấy trong giây lát) không có nghĩa là AJAX, vì API XHR có thể làm việc theo cả hai cách đồng bộ và không đồng bộ.
XHR theo mặc định được đặt thành làm việc không đồng bộ; khi một hàm thực hiện một yêu cầu sử dụng XHR, nó sẽ trả lại mà không cần chờ hồi âm.
Nếu XHR được cấu hình để được đồng bộ, sau đó hàm chờ cho đến khi phản hồi được nhận và xử lý Trước khi trở về.
Mã ví dụ 1
Ví dụ này trình bày một XMLHttpRequest tạo đối tượng. Các mở() phương thức, xác thực URL yêu cầu và gửi () phương thức gửi yêu cầu.
var xhr = new XMLHttpRequest (); xhr.open ("NHẬN", url); xhr.send (); Bất kỳ truy cập trực tiếp vào dữ liệu phản hồi sau gửi () sẽ vô ích, bởi vì gửi () đừng đợi cho đến khi yêu cầu được hoàn thành Hãy nhớ rằng, XMLHTTPRequest được đặt để hoạt động không đồng bộ theo mặc định.
Mã ví dụ 2
Các hello.txt tệp trong ví dụ này là một tệp văn bản đơn giản chứa văn bản 'xin chào'. Các phản ứng thuộc tính của XHR không hợp lệ, vì nó không xuất ra văn bản 'xin chào'.
var xhr = new XMLHttpRequest (); xhr.open ("NHẬN", "hello.txt"); xhr.send (); document.write (xhr.response); // chuỗi rỗng XHR thực hiện một thói quen vi mô tiếp tục kiểm tra phản hồi trong mỗi mili giây và kích hoạt sự kiện miễn phí cho các tiểu bang khác nhau một yêu cầu đi qua. Khi phản hồi được tải, một sự kiện tải được kích hoạt bởi XHR, có thể cung cấp một phản hồi hợp lệ.
var xhr = new XMLHttpRequest (); xhr.open ("NHẬN", "hello.txt"); xhr.send (); xhr.onload = function () document.write (this.response) // ghi 'xin chào' vào tài liệu Phản hồi bên trong sự kiện tải đầu ra 'xin chào', văn bản chính xác.
Đi theo cách không đồng bộ được ưu tiên hơn, vì nó không chặn các tập lệnh khác cho đến khi yêu cầu được hoàn thành.
Nếu phản hồi phải được xử lý đồng bộ, chúng tôi sẽ vượt qua sai như là đối số cuối cùng của mở, mà gắn cờ API XHR nói nó phải đồng bộ (theo mặc định là đối số cuối cùng của mở Là thật, mà bạn không cần chỉ định rõ ràng).
var xhr = new XMLHttpRequest (); xhr.open ("NHẬN", "hello.txt", sai); xhr.send (); document.write (xhr.response); // viết 'xin chào' vào tài liệu Tại sao học tất cả những điều này?
Hầu hết tất cả những người mới bắt đầu đều mắc một số lỗi với các khái niệm không đồng bộ như setTimeout () và AJAX, ví dụ bằng cách giả sử setTimeout () thực thi mã sau thời gian trễ hoặc bằng cách xử lý phản hồi trực tiếp bên trong hàm thực hiện yêu cầu AJAX.
Nếu bạn biết làm thế nào câu đố phù hợp, bạn có thể tránh nhầm lẫn như vậy. Bạn biết rằng thời gian trễ trong setTimeout () không cho biết thời gian khi việc thực thi mã bắt đầu, nhưng thời gian khi hết giờ và một tin nhắn mới được xếp hàng, nó sẽ chỉ được xử lý khi ngăn xếp cuộc gọi miễn phí để làm như vậy.
