Làm thế nào để tạo một hàm không đồng bộ trong Javascript? – javascript viết hàm không đồng bộ

Cổng thông tin Khoa học Máy tính dành cho những người yêu thích máy tính. Nó bao gồm các bài báo về khoa học máy tính và lập trình được viết tốt, được tư duy tốt và được giải thích tốt, các câu đố và thực hành / lập trình cạnh tranh / các câu hỏi phỏng vấn công ty.

Bạn đang xem : hàm viết không đồng bộ của javascript

JavaScript là một ngôn ngữ đơn luồng và đồng bộ. Mã được thực thi theo thứ tự từng cái một. Nhưng Javascript có vẻ không đồng bộ trong một số trường hợp.

Ví dụ:

HTML

< / p>

& lt;! DOCTYPE html & gt;

& lt; html lang = " en "< / code> head & gt;

& lt; meta bộ ký tự = "utf-8" / & gt;

& lt; title & gt; & lt; / title & gt;

& lt; / head & gt;

& lt; body & gt;

& lt; div id div & gt;

& lt; script & gt;

var msg = document.getElementById ("message");

hàm f1 () {

setTimeout (function () {

msg.innerHTML + = "

& lt; p & gt; f1 đang bắt đầu & lt; / p & gt;

";

msg.innerHTML + = "

& lt; p & gt; f1 đang kết thúc & lt; / p & gt;

";

}, 100);

}

function f2 () {< / code>

msg.innerHTML + = " < / p>

& lt; p & gt; f2 đang bắt đầu từ khóa & lt; / p & gt;

";

f1 ();

msg.innerHTML + = "

& lt; p & gt; f2 đang kết thúc & lt; / < / code> p & gt;

";

}

f2 ();

& lt; / script & gt;

& lt; / body & gt;

& lt; / html & gt;

 
 

Đầu ra

 f2 đang bắt đầu
f2 đang kết thúc
f1 đang bắt đầu
f1 đang kết thúc 

Bây giờ, chúng ta có thể thấy sau khi thực hiện setTimeout (f1, 100), chương trình của chúng ta không đợi bộ đếm thời gian kết thúc mà nó đang nhảy vào câu lệnh tiếp theo ngay lập tức. Điều này xảy ra bởi vì nếu chúng ta muốn thực thi một số sự kiện, JavaScript sẽ đặt sự kiện đó vào hàng đợi sự kiện và tiếp tục quá trình thực thi bình thường của chương trình. Công cụ định kỳ xem xét hàng đợi sự kiện để xem liệu một số sự kiện có cần được gọi hay không.
Nhưng chúng tôi có thể muốn chương trình của mình đợi cho đến khi một số sự kiện hoặc công việc cụ thể hoàn thành trước khi xử lý các lệnh tiếp theo.

Một chức năng không đồng bộ được triển khai bằng cách sử dụng async, await và Promise.

  • async: Từ khóa “async” xác định một hàm không đồng bộ.
 Cú pháp
hàm không đồng bộ FunctionName () {
    ...
} 
  • await: Hàm “async” chứa “await” tạm dừng việc thực thi hàm “async”. “Await” chỉ hợp lệ trong hàm “async”.
  • Promise: Promise là một giá trị proxy. Nó cho chúng ta biết về sự thành công / thất bại của sự kiện không đồng bộ. Lời hứa phải có lệnh gọi giải quyết () hoặc từ chối () nếu không, người tiêu dùng Lời hứa sẽ không bao giờ biết liệu Lời hứa có được thực hiện hay không. Nếu điều đó xảy ra thì chương trình sẽ tiếp tục chờ đợi và khối mã đó sẽ không bao giờ được thực thi thêm. Còn rất nhiều thứ nữa để Promise nhưng chúng ta có thể tạo hàm Asynchronous mà không cần kiến ​​thức sâu về nó.

Ví dụ: Hãy làm lại ví dụ trên bằng cách sử dụng hàm Asynchronous.

HTML

< / p>

& lt;! DOCTYPE html & gt;

& lt; html lang = "en" & gt;

& lt; head & gt; < / code>

& lt; meta bộ ký tự = " utf-8 " / & gt;

& lt; title & gt; & lt; / title & gt;

& lt; / head & gt;

& lt; body & gt;

& lt; div id = "message" & gt; & lt; / div & gt;

& lt; script & gt;

var msg = document.getElementById ("message");

hàm f1 () {

trả về Lời hứa mới (chức năng (giải quyết, từ chối) {< / code>

setTimeout (function () { < / p>

msg.innerHTML + = "

< p class = "line number16 index15 alt1"> & lt; p & gt; f1 đang bắt đầu & lt; / p & gt;

";

msg.innerHTML + = "

& lt; p & gt; f1 đang kết thúc & lt; / p & gt;

";

Resolution ();

}, 100);

< / code> })

}

không đồng bộ function f2 () {

msg.innerHTML + = "

& lt; p & gt; f2 đang bắt đầu & lt; / p & gt;

";

// Công cụ đợi f1 () hoàn thành nó

// thực thi trước khi thực hiện dòng tiếp theo

await f1 ();

msg.innerHTML + = "

& lt; p & gt; f2 kết thúc & lt; / p & gt;

";

}

f2 ();

& lt; / script & gt;

& lt; / body < code class = "trơn"> & gt;

& lt; / html & gt;

 
 

Đầu ra:

 f2 đang bắt đầu
f1 đang bắt đầu
f1 đang kết thúc
f2 đang kết thúc 

Trong ví dụ trên, chương trình đợi f1 () hoàn thành việc thực thi trước khi tiếp tục. “Chờ đợi” dừng việc thực thi đoạn mã đó cho đến khi nhận được Lời hứa. Giải quyết () được sử dụng để giải quyết Lời hứa. Nó có nghĩa là Lời hứa được hoàn thành. Tương tự như giải quyết, chúng ta cũng có thể sử dụng từ chối () để biết Lời hứa bị từ chối. Hàm từ chối () chủ yếu được sử dụng cho mục đích gỡ lỗi và lỗi, chúng ta không cần phải tìm hiểu sâu về nó ngay bây giờ.

Ví dụ: Nếu chúng ta muốn Promise trở lại một số giá trị, chúng tôi có thể chuyển nó trong giải quyết (biến).

HTML

< / p>

& lt;! DOCTYPE html & gt;

& lt; html lang = "en" & gt;

& lt; head & gt; < / code>

& lt; meta bộ ký tự = " utf-8 " / & gt;

& lt; title & gt; & lt; / title & gt;

& lt; / head & gt;

& lt; body & gt;

& lt; div id = "message" & gt; & lt; / div & gt;

& lt; script & gt;

var msg = document.getElementById (" message ");

function f1 () {

trả về Lời hứa mới (hàm (giải quyết, từ chối) {

setTimeout (function () {

msg. innerHTML + = "

& lt; p & gt; f1 đang bắt đầu & lt; / p & gt;

";

msg.innerHTML + ="

& lt; p & gt; f1 đang kết thúc & lt; / p & gt;

"; < / p>

}, 100);

})

< code class = "trơn">}

hàm async f2 () {

msg.innerHTML + = "

& lt; p & gt; f2 là bắt đầu & lt; / p & gt;

< code class = "trơn"> ";

var p = await f1 ();

if (p == 1) msg.innerHTML + = "

& lt; p & gt; Lời hứa đã nhận & lt; / p & gt;

"

msg.innerHTML + ="

& lt; p & gt; f2 đang kết thúc & lt; / p & gt;

";

}

f2 ();

& lt; / script & gt;

& lt; / body & gt;

& lt; / html & gt; < / code>

 
  

Đầu ra:

 f2 đang bắt đầu
f1 đang bắt đầu
f1 đang kết thúc
Lời hứa đã nhận
f2 đang kết thúc 

Chờ Nhiều Hứa hẹn: Điều gì sẽ xảy ra nếu chúng ta phải đợi nhiều chức năng? Chúng tôi có hai cách để thực hiện.

Ví dụ: Chúng tôi có thể viết nhiều câu lệnh await tuần tự.

HTML

< / p>

& lt;! DOCTYPE html & gt;

& lt; html lang = "en" & gt;

& lt; head & gt; < / code>

& lt; meta bộ ký tự = " utf-8 " / & gt;

& lt; title & gt; & lt; / title & gt;

& lt; / head & gt;

& lt; body & gt;

& lt; div id = "message" & gt; & lt; / div & gt;

& lt; script & gt;

var msg = document.getElementById (" message ");

function f1 () {

trả về Lời hứa mới (hàm (giải quyết, từ chối) {

setTimeout (function () {

msg.innerHTML + = "

& lt; p & gt; f1 đang bắt đầu & lt; / p & gt;

";

msg.innerHTML + = "

& lt; p & gt; f1 đang kết thúc & lt; / p & gt;

";

Resolution ();

}, 1000);

})

}

function f3 () {

trả về lời hứa mới (chức năng (giải quyết, từ chối) {

setTimeout (function () {

msg.innerHTML + = "

& lt; p & gt; f3 đang bắt đầu & lt; / p & gt;

";

msg.innerHTML + = "

& lt; p & gt; f3 đang kết thúc & lt; / p & gt;

";

Resolution ();

}, 1000);

})

}

hàm async f2 () {

msg.innerHTML + = "

& lt; p & gt; f2 đang bắt đầu & lt; / p & gt;

";

await f1 ();

await f3 ();

msg.innerHTML + ="

& lt; p & gt; f2 đang kết thúc & lt; / p & gt;

";

}

< p class = "line number50 index49 alt1">

f2 ();

& lt; / script & gt;

& lt; / body & gt; < / p>

& lt; / html & gt;

 
 

Đầu ra

 f2 đang bắt đầu
f1 đang bắt đầu
f1 đang kết thúc
f3 đang bắt đầu
f3 đang kết thúc
f2 đang kết thúc 
  • Trong ví dụ trên, đầu tiên chúng ta nhận được
 f2 đang bắt đầu 
  • Sau đó, sau 1 giây chúng ta get
 f1 đang bắt đầu
f1 đang kết thúc 
  • Sau đó, sau 1 giây nữa, chúng tôi nhận được
 f3 đang bắt đầu
f3 đang kết thúc
f2 đang kết thúc 

Ví dụ: Cách thứ hai để đợi nhiều Promise là chạy các Promise song song bằng cách sử dụng Promise.all (đối tượng có thể lặp lại).

Cú pháp:

 await Promise.all (đối tượng có thể lặp lại); 

Ví dụ:

HTML

& lt;! DOCTYPE html & gt;

& lt; html lang < / code> = "en" & gt;

< p class = "line number3 index2 alt2"> & lt; head & gt;

& lt; meta bộ ký tự = " utf-8 " / & gt;

& lt; title & gt; & lt; / < code class = "keyword"> title & gt;

& lt ; / head & gt;

& lt; body & gt;

& lt; div id = " message " & gt; & lt; / div & gt;

& lt; script & gt;

var msg = document.getElementById (" message ");

trả về Lời hứa mới (hàm (giải quyết, từ chối) {

setTimeout (function () {

msg.innerHTML + = "

& lt; p & gt; f1 đang bắt đầu & lt; / p & gt;

";

msg.innerHTML + = "

& lt; p & gt; f1 đang kết thúc & lt; / p & gt;

"; < / p>

Resolution ();

}, 1000);

})

}

function f3 () {

trả về Lời hứa mới (chức năng (giải quyết, từ chối) {

setTimeout (function () {

msg.innerHTML + = "

& lt; p & gt; f3 đang bắt đầu & lt; / p & gt;

";

msg.innerHTML + =" < / code>

& lt; p & gt; f3 đang kết thúc & lt; / p & gt;

";

giải quyết ();

}, 1000);

})

}

hàm async f2 () {

msg.innerHTML + = "

& lt; p & gt; f2 đang bắt đầu & lt; / < code class = "keyword"> p & gt;

" ;

chờ Promise.all ([f1 (), f3 ()]);

msg.innerHTML + = "

& lt; p & gt; f2 là kết thúc & lt; / p & gt;

< code class = "trơn"> ";

}

f2 ();

& lt; / script & gt;

& lt; / body & gt;

& lt; / html & gt;

 
 

Đầu ra

 f2 đang bắt đầu
f1 đang bắt đầu
f1 đang kết thúc
f3 đang bắt đầu
f3 đang kết thúc
f2 đang kết thúc 
  • Kết quả giống như mã trước đó, nhưng trong trường hợp này, chương trình sẽ xuất ra
  • f2 đang bắt đầu
    • Sau đó, đợi 1 giây và đầu ra
     f1 đang bắt đầu
    f1 đang kết thúc
    f3 đang bắt đầu
    f3 đang kết thúc
    f2 đang kết thúc 

    Vì f1 () và f3 () đang chạy song song nên chúng ta không cần đợi thêm 1 giây trước khi thực thi f3 (). Nói một cách đơn giản, bộ đếm thời gian của setTimeout () trong f1 () và f3 () bắt đầu cùng một lúc.

    Lưu ý: Chúng tôi cũng có thể triển khai hành vi không đồng bộ chỉ sử dụng Promise mà không có async / await và callbacks, hãy tham khảo liên kết sau để biết điều đó:

    < / p>

    Ghi chú cá nhân của tôi


Xem thêm những thông tin liên quan đến chủ đề javascript viết hàm không đồng bộ

JavaScript Async Await

  • Tác giả: Web Dev Simplified
  • Ngày đăng: 2019-02-09
  • Đánh giá: 4 ⭐ ( 6012 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: One of the hardest things about writing good JavaScript is dealing with heavily nested asynchronous code. Promises were created to solve the problem with callback hell, but there are still plenty of nested problems related to promises. This is where async/await comes in. JavaScript added async/await to allows developers to write asynchronous code in a way that looks and feels synchronous. This helps to remove many of the problems with nesting that promises have, and as a bonus can make asynchronous code much easier to read and write. In this video I am going to explain what async/await is and how to use async/await to rewrite your existing promise based code.

    Learn Promises First:
    https://youtu.be/DHvZLI7Db8E

    Async/Await Article:
    https://blog.webdevsimplified.com/2021-11/async-await

    Twitter:
    https://twitter.com/DevSimplified

    GitHub:
    https://github.com/WebDevSimplified

    CodePen:
    https://codepen.io/WebDevSimplified

    JavaScript AsyncAwait Promises

Đệ quy để giải cứu bằng JavaScript không đồng bộ

  • Tác giả: helpex.vn
  • Đánh giá: 4 ⭐ ( 1100 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Cuộc gọi lại trong vòng lặp Mặc dù các cuộc gọi lại cung cấp khả năng tuần tự hóa việc thực thi mã, đôi khi được yêu cầu trong một khung không đồng bộ mà JavaScript cung cấp (ví dụ:…

Xử Lý Bất Đồng Bộ Trong Javascript - Phần 1

  • Tác giả: codelearn.io
  • Đánh giá: 5 ⭐ ( 7495 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Hãy cùng mình tìm hiểu về bất đồng bộ khi lập trình Javascript và chúng giúp các bạn code dễ dàng hơn trong công việc như thế nào nhé.

Đồng bộ và bất đồng bộ trong javascript

  • Tác giả: longnv.name.vn
  • Đánh giá: 4 ⭐ ( 6141 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Đồng bộ và bất đồng bộ trong javascript mang đến cho bạn kiến thức về xử lý đồng bộ, bất động đồng bộ và các cách vận dụng trong lập trình js

Cách trả về kết quả của một hàm không đồng bộ trong JavaScript

  • Tác giả: tech-wiki.online
  • Đánh giá: 3 ⭐ ( 6278 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

XỬ LÝ ĐỒNG BỘ VÀ BẤT ĐỒNG BỘ TRONG JAVASCRIPT

  • Tác giả: co-well.vn
  • Đánh giá: 4 ⭐ ( 4677 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Tìm hiểu về đồng bộ và bất đồng bộ trong Javascript khi phát triển website thông qua hướng dẫn từ chuyên gia của CO-WELL Asia.

3 cách xử lý bất đồng bộ ở JavaScript

  • Tác giả: viblo.asia
  • Đánh giá: 4 ⭐ ( 8631 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Bất đồng bộ trong JavaScript là gì? Có 3 cách để làm được việc này đó là `callback`, `Promise` và `async/await`.

Xem thêm các bài viết khác thuộc chuyên mục: Kiến thức lập trình

Xem Thêm  SQL Server Chuyển đổi ngày giờ thành ngày tháng + Ví dụ - chuyển đổi datetime của máy chủ sql sang ngày