Làm cách nào để gọi các hàm đồng bộ trong JavaScript?
Trong bài viết này, chúng tôi sẽ giải thích lập trình bất đồng bộ là gì, tại sao chúng tôi cần nó và thảo luận ngắn gọn về một số cách các chức năng không đồng bộ đã được triển khai trong lịch sử trong JavaScript Show
Lập trình không đồng bộ là một kỹ thuật cho phép chương trình của bạn bắt đầu một tác vụ có khả năng chạy dài và vẫn có thể phản hồi các sự kiện khác trong khi tác vụ đó chạy, thay vì phải đợi cho đến khi tác vụ đó kết thúc. Khi nhiệm vụ đó đã hoàn thành, chương trình của bạn sẽ hiển thị kết quả Nhiều chức năng do trình duyệt cung cấp, đặc biệt là những chức năng thú vị nhất, có thể mất nhiều thời gian và do đó, không đồng bộ. Ví dụ
Vì vậy, mặc dù bạn có thể không phải thực hiện các chức năng không đồng bộ của riêng mình thường xuyên, nhưng rất có thể bạn cần sử dụng chúng một cách chính xác Trong bài viết này, chúng ta sẽ bắt đầu bằng cách xem xét vấn đề với các hàm đồng bộ chạy dài, khiến cho việc lập trình không đồng bộ trở nên cần thiết Lập trình đồng bộHãy xem xét đoạn mã sau
mã này
Chúng ta nên lưu ý ở đây rằng trình duyệt duyệt từng dòng một của chương trình một cách hiệu quả, theo thứ tự chúng ta đã viết nó. Tại mỗi điểm, trình duyệt đợi dòng hoàn thành công việc của nó trước khi chuyển sang dòng tiếp theo. Nó phải làm điều này bởi vì mỗi dòng phụ thuộc vào công việc được thực hiện trong các dòng trước Điều đó làm cho chương trình này trở thành một chương trình đồng bộ. Nó vẫn sẽ đồng bộ ngay cả khi chúng ta gọi một chức năng riêng biệt, như thế này
Ở đây, 8 là một hàm đồng bộ vì người gọi phải đợi hàm hoàn thành công việc và trả về một giá trị trước khi người gọi có thể tiếp tụcMột chức năng đồng bộ chạy dàiNếu chức năng đồng bộ mất nhiều thời gian thì sao? Chương trình bên dưới sử dụng thuật toán rất kém hiệu quả để tạo nhiều số nguyên tố lớn khi người dùng nhấp vào nút "Tạo số nguyên tố". Số lượng số nguyên tố do người dùng chỉ định càng cao thì thao tác sẽ càng mất nhiều thời gian
0Hãy thử nhấp vào "Tạo số nguyên tố". Tùy thuộc vào tốc độ máy tính của bạn, có thể sẽ mất vài giây trước khi chương trình hiển thị thông báo "Đã hoàn tất. " thông điệp Sự cố với các chức năng đồng bộ chạy dàiVí dụ tiếp theo giống như ví dụ trước, ngoại trừ chúng tôi đã thêm một hộp văn bản để bạn nhập vào. Lần này, hãy nhấp vào "Tạo số nguyên tố" và thử nhập vào hộp văn bản ngay sau đó Bạn sẽ thấy rằng trong khi chức năng 9 của chúng tôi đang chạy, chương trình của chúng tôi hoàn toàn không phản hồi. bạn không thể nhập bất cứ thứ gì, nhấp vào bất cứ thứ gì hoặc làm bất cứ điều gì khác 2 3 0Đây là vấn đề cơ bản với các chức năng đồng bộ chạy dài. Những gì chúng tôi cần là một cách để chương trình của chúng tôi
Đó chính xác là những gì các chức năng không đồng bộ có thể làm. Phần còn lại của mô-đun này giải thích cách chúng được triển khai trong JavaScript xử lý sự kiệnMô tả mà chúng ta vừa thấy về các hàm không đồng bộ có thể nhắc bạn về các trình xử lý sự kiện và nếu đúng như vậy thì bạn đã đúng. Trình xử lý sự kiện thực sự là một dạng lập trình không đồng bộ. bạn cung cấp một chức năng (trình xử lý sự kiện) sẽ được gọi, không phải ngay lập tức mà bất cứ khi nào sự kiện xảy ra. Nếu "sự kiện" là "hoạt động không đồng bộ đã hoàn thành", thì sự kiện đó có thể được sử dụng để thông báo cho người gọi về kết quả của một lệnh gọi hàm không đồng bộ Một số API không đồng bộ ban đầu đã sử dụng các sự kiện theo cách này. API 0 cho phép bạn thực hiện các yêu cầu HTTP tới máy chủ từ xa bằng JavaScript. Vì quá trình này có thể mất nhiều thời gian, nên đây là một API không đồng bộ và bạn được thông báo về tiến độ và khả năng hoàn thành cuối cùng của một yêu cầu bằng cách đính kèm trình xử lý sự kiện vào đối tượng 0Ví dụ sau đây cho thấy điều này trong hành động. Nhấn "Click to start request" để gửi yêu cầu. Chúng tôi tạo một 0 mới và lắng nghe sự kiện 3 của nó. Trình xử lý ghi nhật ký "Đã hoàn tất. " thông báo cùng với mã trạng tháiSau khi thêm trình lắng nghe sự kiện, chúng tôi gửi yêu cầu. Lưu ý rằng sau này, chúng tôi có thể đăng nhập "Yêu cầu XHR đã bắt đầu". nghĩa là, chương trình của chúng tôi có thể tiếp tục chạy trong khi yêu cầu đang diễn ra và trình xử lý sự kiện của chúng tôi sẽ được gọi khi yêu cầu hoàn tất 9 0 1Điều này giống như các trình xử lý sự kiện mà chúng ta đã gặp trong mô-đun trước, ngoại trừ việc thay vì sự kiện là hành động của người dùng, chẳng hạn như người dùng nhấp vào nút, thì sự kiện này là sự thay đổi trạng thái của một số đối tượng gọi lạiTrình xử lý sự kiện là một loại gọi lại cụ thể. Một cuộc gọi lại chỉ là một chức năng được truyền vào một chức năng khác, với mong muốn rằng cuộc gọi lại sẽ được gọi vào thời điểm thích hợp. Như chúng ta vừa thấy, các cuộc gọi lại từng là cách chính để triển khai các chức năng không đồng bộ trong JavaScript Tuy nhiên, mã dựa trên cuộc gọi lại có thể khó hiểu khi bản thân cuộc gọi lại phải gọi các hàm chấp nhận cuộc gọi lại. Đây là tình huống phổ biến nếu bạn cần thực hiện một số thao tác chia nhỏ thành một loạt các chức năng không đồng bộ. Ví dụ, hãy xem xét những điều sau đây 0Ở đây, chúng tôi có một thao tác được chia thành ba bước, trong đó mỗi bước phụ thuộc vào bước cuối cùng. Trong ví dụ của chúng tôi, bước đầu tiên thêm 1 vào đầu vào, bước thứ hai thêm 2 và bước thứ ba thêm 3. Bắt đầu với đầu vào là 0, kết quả cuối cùng là 6 (0 + 1 + 2 + 3). Là một chương trình đồng bộ, điều này rất đơn giản. Nhưng nếu chúng ta triển khai các bước bằng cách sử dụng lệnh gọi lại thì sao? 1Bởi vì chúng tôi phải gọi các cuộc gọi lại bên trong các cuộc gọi lại, chúng tôi nhận được một hàm 4 được lồng sâu, khó đọc và gỡ lỗi hơn nhiều. Điều này đôi khi được gọi là "địa ngục gọi lại" hoặc "kim tự tháp diệt vong" (vì vết lõm trông giống như một kim tự tháp trên mặt của nó)Khi chúng ta lồng các cuộc gọi lại như thế này, nó cũng có thể rất khó xử lý lỗi. thường thì bạn phải xử lý lỗi ở từng cấp của “kim tự tháp”, thay vì chỉ xử lý lỗi một lần ở cấp cao nhất Vì những lý do này, hầu hết các API không đồng bộ hiện đại không sử dụng lệnh gọi lại. Thay vào đó, nền tảng của lập trình bất đồng bộ trong JavaScript là 5, và đó là chủ đề của bài viết tiếp theo
Làm cách nào để thực hiện cuộc gọi hàm đồng bộ trong JavaScript?Async/Await là một cú pháp mới để viết mã không đồng bộ trong JavaScript nhằm làm cho mã không đồng bộ hoạt động theo cách đồng bộ. Từ async được sử dụng trước một chức năng có nghĩa là một chức năng luôn trả về một lời hứa.
Các chức năng trong JavaScript có đồng bộ không?Phần giới thiệu. về cơ bản, JavaScript là ngôn ngữ đơn luồng đồng bộ, chặn,. Điều đó chỉ có nghĩa là tại một thời điểm chỉ có một hoạt động có thể được tiến hành.
Chúng ta có thể chạy đồng thời hai chức năng trong JavaScript không?Có, bạn có thể gọi hai Hàm JS trên một onClick . Sử dụng dấu chấm phẩy (';') giữa cả hai chức năng.
Làm cách nào để gọi các hàm lần lượt trong JavaScript?$('a. nút'). click(function(){ if (condition == 'true'){ function1(someVariable); function2(someOtherVariable); } other { doThis(someVariable); } }); |