Hướng dẫn wait trong javascript - đợi trong javascript

Question

Vấn đề duy nhất với những lời hứa là IE không hỗ trợ họ. Edge không, nhưng có rất nhiều IE 10 và 11 ngoài kia: https://developer.mozilla.org/en-us/docs/web/javascript/reference/global_objects/promise (khả năng tương thích ở phía dưới)

Nội dung chính Show

Chờ chức năng kết thúc bằng cách sử dụng các chức năng gọi lại
Chờ chức năng kết thúc bằng cách sử dụng đối tượng Promise
Đợi chức năng kết thúc bằng cách sử dụng từ khóa Async/Await
Sự kết luận
JavaScript có chờ chức năng kết thúc trước khi tiếp tục không?
Có chờ đợi chức năng để hoàn thành?
JavaScript có chức năng chờ không?
Làm thế nào để bạn chờ đợi một chức năng hoàn thành?

Nội dung chính ShowShow

Chờ chức năng kết thúc bằng cách sử dụng các chức năng gọi lại
Chờ chức năng kết thúc bằng cách sử dụng đối tượng Promise
Đợi chức năng kết thúc bằng cách sử dụng từ khóa Async/Await
Sự kết luận
JavaScript có chờ chức năng kết thúc trước khi tiếp tục không?
Có chờ đợi chức năng để hoàn thành?
JavaScript có chức năng chờ không?
Làm thế nào để bạn chờ đợi một chức năng hoàn thành?

Vì vậy, JavaScript là một luồng đơn. Nếu bạn không thực hiện một cuộc gọi không đồng bộ, nó sẽ hành xử có thể dự đoán được. Chủ đề JavaScript chính sẽ thực thi một hàm hoàn toàn trước khi thực thi quy mô tiếp theo, theo thứ tự chúng xuất hiện trong mã. Đảm bảo thứ tự cho các hàm đồng bộ là tầm thường - mỗi hàm sẽ thực thi hoàn toàn theo thứ tự nó được gọi.

Hãy nghĩ về chức năng đồng bộ như một đơn vị công việc nguyên tử. Chủ đề JavaScript chính sẽ thực thi đầy đủ, theo thứ tự các câu lệnh xuất hiện trong mã.. The main JavaScript thread will execute it fully, in the order the statements appear in the code.. The main JavaScript thread will execute it fully, in the order the statements appear in the code.

Nhưng, ném vào cuộc gọi không đồng bộ, như trong tình huống sau:

showLoadingDiv(); // function 1

makeAjaxCall(); // function 2 - contains async ajax call

hideLoadingDiv(); // function 3

Điều này không làm những gì bạn muốn. Nó ngay lập tức thực hiện hàm 1, hàm 2 và chức năng 3. Tải các div flash và nó biến mất, trong khi cuộc gọi AJAX gần như không hoàn tất, mặc dù NO___Trans___PRE___15 đã trở lại. Sự phức tạp là

function first() {
  console.log("1st");
}

function second() {
  console.log("2nd");
}

function third() {
  console.log("3rd");
}

first();
second();
third();

5 đã phá vỡ công việc của nó thành các khối được nâng cao từng chút một bởi mỗi lần quay của chủ đề JavaScript chính - nó hoạt động một cách trước mắt. Nhưng cùng một luồng chính, trong một lần quay/chạy, đã thực hiện các phần đồng bộ một cách nhanh chóng và dự đoán.. It instantaneously executes function 1, function 2, and function 3. Loading div flashes and it's gone, while the ajax call is not nearly complete, even though 5 đã phá vỡ công việc của nó thành các khối được nâng cao từng chút một bởi mỗi lần quay của chủ đề JavaScript chính - nó hoạt động một cách trước mắt. Nhưng cùng một luồng chính, trong một lần quay/chạy, đã thực hiện các phần đồng bộ một cách nhanh chóng và dự đoán.. It instantaneously executes function 1, function 2, and function 3. Loading div flashes and it's gone, while the ajax call is not nearly complete, even though

function first() {
  console.log("1st");
}

function second() {
  console.log("2nd");
}

function third() {
  console.log("3rd");
}

first();
second();
third();

5 has returned. THE COMPLICATION is that

function first() {
  console.log("1st");
}

function second() {
  console.log("2nd");
}

function third() {
  console.log("3rd");
}

first();
second();
third();

5 has broken its work up into chunks which are advanced little by little by each spin of the main JavaScript thread - it's behaving asychronously. But that same main thread, during one spin/run, executed the synchronous portions quickly and predictably.THE COMPLICATION is that

function first() {
  console.log("1st");
}

function second() {
  console.log("2nd");
}

function third() {
  console.log("3rd");
}

first();
second();
third();

5 has broken its work up into chunks which are advanced little by little by each spin of the main JavaScript thread - it's behaving asychronously. But that same main thread, during one spin/run, executed the synchronous portions quickly and predictably.

Vì vậy, cách tôi xử lý nó: như tôi đã nói chức năng là đơn vị công việc nguyên tử. Tôi đã kết hợp mã hàm 1 và 2 - Tôi đặt mã hàm 1 trong hàm 2, trước cuộc gọi không đồng bộ. Tôi đã thoát khỏi chức năng 1. Mọi thứ lên đến và bao gồm cuộc gọi không đồng bộ thực thi có thể dự đoán được, theo thứ tự.: Like I said the function is the atomic unit of work. I combined the code of function 1 and 2 - I put the code of function 1 in function 2, before the asynch call. I got rid of function 1. Everything up to and including the asynchronous call executes predictably, in order.: Like I said the function is the atomic unit of work. I combined the code of function 1 and 2 - I put the code of function 1 in function 2, before the asynch call. I got rid of function 1. Everything up to and including the asynchronous call executes predictably, in order.

Sau đó, khi cuộc gọi không đồng bộ hoàn thành, sau một số spin của luồng JavaScript chính, có chức năng gọi nó 3. Điều này đảm bảo thứ tự. Ví dụ, với AJAX, trình xử lý sự kiện OnReadyStateChange được gọi là nhiều lần. Khi nó báo cáo nó đã hoàn thành, sau đó gọi chức năng cuối cùng bạn muốn.This guarantees the order. For example, with ajax, the onreadystatechange event handler is called multiple times. When it reports it's completed, then call the final function you want. This guarantees the order. For example, with ajax, the onreadystatechange event handler is called multiple times. When it reports it's completed, then call the final function you want.

Tôi đồng ý nó lộn xộn hơn. Tôi thích có mã là đối xứng, tôi thích có các chức năng làm một việc (hoặc gần với nó) và tôi không thích cuộc gọi AJAX bằng bất kỳ cách nào chịu trách nhiệm cho màn hình (tạo sự phụ thuộc vào người gọi). Nhưng, với một cuộc gọi không đồng bộ được nhúng trong một hàm đồng bộ, các thỏa hiệp phải được thực hiện để đảm bảo lệnh thực thi. Và tôi phải viết mã cho IE 10 nên không có lời hứa.

Tóm tắt: Đối với các cuộc gọi đồng bộ, thứ tự đảm bảo là tầm thường. Mỗi hàm thực thi đầy đủ theo thứ tự nó được gọi. Đối với một chức năng có cuộc gọi không đồng bộ, cách duy nhất để đảm bảo thứ tự là giám sát khi cuộc gọi Async hoàn thành và gọi hàm thứ ba khi trạng thái đó được phát hiện.: For synchronous calls, guaranteeing order is trivial. Each function executes fully in the order it was called. For a function with an asynchronous call, the only way to guarantee order is to monitor when the async call completes, and call the third function when that state is detected.: For synchronous calls, guaranteeing order is trivial. Each function executes fully in the order it was called. For a function with an asynchronous call, the only way to guarantee order is to monitor when the async call completes, and call the third function when that state is detected.

Để thảo luận về các chủ đề JavaScript, xem: https://medium.com/@francesco_rizzi/javascript-main-thread-dissed-43c85fce7e23 và https://developer.mozilla.org/en-us/docs Sự kiện

Ngoài ra, một câu hỏi tương tự, được đánh giá cao về chủ đề này: Tôi nên gọi 3 chức năng như thế nào để thực hiện chúng từng chức năng?

Thực thi mã JavaScript là không đồng bộ theo mặc định, điều đó có nghĩa là JavaScript đã giành được sự chờ đợi để một chức năng hoàn thành trước khi thực thi mã bên dưới nó.

Ví dụ, hãy xem xét các cuộc gọi chức năng sau:

function first() {
  console.log("1st");
}

function second() {
  console.log("2nd");
}

function third() {
  console.log("3rd");
}

first();
second();
third();

JavaScript sẽ thực thi mã của bạn từ trên xuống dưới, điều đó có nghĩa là đầu ra sẽ được hiển thị bên dưới:

Bây giờ, hãy để trì hoãn cuộc gọi đến chức năng NO___TRANS___PRE___17 bằng cách thực hiện cuộc gọi bên trong phương thức NO___Trans___PRE___18 như sau:

setTimeout(function () {
  first();
}, 0);
second();
third();

Kết quả sẽ như sau:

Ví dụ mã ở trên đã sử dụng phương thức NO___TRANS___PRE___18 để đưa ra một điểm. Trong một ứng dụng web thực, chức năng no___trans___pre___18 có thể được thay thế bằng một cuộc gọi đến hàm no___trans___pre___21 để truy xuất thông tin quan trọng cho hoạt động ứng dụng của bạn.

JavaScript đã giành được chức năng Chờ đợi của bạn NO___TRANS___PRE___21 để trả lời trả lời trước khi thực thi mã bên dưới nó:

let response = fetch("");
console.log(response); // undefined

Để xử lý bản chất không đồng bộ của thực thi JavaScript, bạn có thể sử dụng một trong ba phương pháp có sẵn để chờ đợi một chức năng hoàn thành:

Sử dụng các chức năng NO___TRANS___PRE___23
Sử dụng không có đối tượng NO___Trans___Pre___24
Sử dụng NO___Trans___Pre___25 Từ khóa

Hướng dẫn này sẽ giúp bạn tìm hiểu cả ba phương pháp, bắt đầu từ việc sử dụng NO___Trans___PRE___23 Chức năng

Chờ chức năng kết thúc bằng cách sử dụng các chức năng gọi lại

Chức năng NO___Trans___Pre___23 là hàm JavaScript thông thường mà bạn chuyển sang chức năng khác. Hàm NO___Trans___Pre___23 sau đó sẽ được gọi bởi chức năng chấp nhận.

Nó dễ hiểu hơn một hàm no___trans___pre___23 thông qua một ví dụ. Xem xét mã sau:

function first(callback) {
  console.log("1st");
  // call the callback function
  callback();
}

function second() {
  console.log("2nd");
}

first(second);

Hàm nhận được chức năng NO___Trans___Pre___23 được tự do gọi nó bất cứ lúc nào trong quá trình thực thi chức năng của nó. Nó rất phổ biến khi thấy chức năng NO___TRANS___PRE___23 được gọi ngay vào cuối quy trình nhận được chức năng nhận.

Bằng cách sử dụng mẫu gọi lại, bạn có thể chuyển chức năng tiếp theo để gọi dưới dạng NO___Trans___PRE___23 cho chức năng trước đó. Sau đó, bạn cần hướng dẫn chức năng nhận được NO___Trans___PRE___23 để gọi chức năng đó vào thời điểm thích hợp.

Để tiếp tục với ví dụ trước, bạn có thể thêm tham số NO___Trans___PRE___23 vào NO___Trans___PRE___17 và NO___TRANS___PRE___36 Chức năng gọi các chức năng bên trong phương thức NO___Trans___PRE___18:

function first(callback) {
  console.log("1st");

  callback();
}

function second(callback) {
  console.log("2nd");

  callback();
}

function third() {
  console.log("3rd");
}

setTimeout(function () {
  first(function () {
    second(function () {
      third();
    });
  });
}, 0);

Xin lưu ý rằng bạn cần truyền tham chiếu chức năng như một hàm gọi lại. Tham chiếu chức năng là tên của hàm không có dấu ngoặc đơn no___trans___pre___38.function reference as a callback function. A function reference is the name of the function without the parentheses function reference as a callback function. A function reference is the name of the function without the parentheses

let response = fetch("");
console.log(response); // undefined

8.

Đó là lý do tại sao các chức năng NO___TRANS___PRE___23 được truyền ở trên sử dụng thêm NO___Trans___Pre___40 để kết thúc cuộc gọi đến hàm tiếp theo.

Truyền các chức năng cùng với tham số gọi lại như được hiển thị bên dưới sẽ gây ra lỗi:

function first() {
  console.log("1st");
}

function second() {
  console.log("2nd");
}

function third() {
  console.log("3rd");
}

first();
second();
third();

0

Mẫu gọi lại cho phép bạn chờ đợi một chức năng hoàn thành trước khi thực hiện đoạn mã tiếp theo.

Nhưng như bạn thấy từ các ví dụ trên, nó yêu cầu bạn chỉnh sửa các chức năng để nó có thể chấp nhận chức năng NO___TRANS___PRE___23.

Hơn nữa, mẫu gọi lại không trực quan và có xu hướng gây ra địa ngục gọi lại trong đó đoạn mã tiếp theo được lồng bên trong mã trước.callback hell where the next piece of code is nested inside the previous one.callback hell where the next piece of code is nested inside the previous one.

Cuộc gọi NO___Trans___Pre___18 ở trên là một ví dụ về địa ngục gọi lại:

function first() {
  console.log("1st");
}

function second() {
  console.log("2nd");
}

function third() {
  console.log("3rd");
}

first();
second();
third();

1

Mã của bạn càng phức tạp thì càng khó hiểu và điều chỉnh mã của bạn.

Đó là lý do tại sao bạn chỉ nên dùng đến mẫu gọi lại khi bạn hết các tùy chọn khác. Bây giờ, hãy để Lừa học cách sử dụng đối tượng

setTimeout(function () {
  first();
}, 0);
second();
third();

4 để chờ đợi một chức năng kết thúc.

Chờ chức năng kết thúc bằng cách sử dụng đối tượng Promise

A NO___Trans___Pre___24 là một đối tượng của ngôn ngữ JavaScript đại diện cho một mã thông báo của sự hoàn thành cuối cùng. Một lời hứa bắt đầu ở trạng thái đang chờ xử lý và có thể được giải quyết hoặc từ chối tùy thuộc vào quá trình diễn ra bên trong lời hứa đó.

Một triển khai lời hứa điển hình trông như sau:

function first() {
  console.log("1st");
}

function second() {
  console.log("2nd");
}

function third() {
  console.log("3rd");
}

first();
second();
third();

3

Tùy thuộc vào kết quả của NO___Trans___Pre___24, hoặc là NO___TRANS___PRE___46 hoặc hàm no___trans___pre___47 sẽ được gọi để kết thúc trạng thái chờ xử lý.

Khi bạn gọi một chức năng trả về NO___TRANS___PRE___24, bạn cần phải xâu chuỗi lệnh gọi chức năng với NO___Trans___PRE___49 và NO___TRANS___PRE___50 Các chức năng như được hiển thị bên dưới:

function first() {
  console.log("1st");
}

function second() {
  console.log("2nd");
}

function third() {
  console.log("3rd");
}

first();
second();
third();

4

Hàm no___trans___pre___46 tương ứng với hàm no___trans___pre___49, trong khi NO___Trans___Pre___47 tương ứng với chức năng NO___Trans___Pre___50.

Sử dụng mẫu Promise, bạn có thể gọi các chức năng của mình một cách tuần tự bằng cách đặt cuộc gọi chức năng tiếp theo bên trong phương thức NO___TRANS___PRE___49.

Hãy xem mã bên dưới:

function first() {
  console.log("1st");
}

function second() {
  console.log("2nd");
}

function third() {
  console.log("3rd");
}

first();
second();
third();

0

Mặc dù bạn cần truyền tham chiếu chức năng khi sử dụng mẫu gọi lại, mẫu chuỗi Promise cho phép bạn gọi hàm ngay bên trong phương thức

function first(callback) {
  console.log("1st");
  // call the callback function
  callback();
}

function second() {
  console.log("2nd");
}

first(second);

9.

Mẫu lời hứa cho phép bạn gọi tuần tự các chức năng của mình trong khi tránh mẫu gọi lại.

Các chức năng JavaScript hiện đại như no___trans___pre___21 đã trả về không

function first() {
  console.log("1st");
}

function second() {
  console.log("2nd");
}

function third() {
  console.log("3rd");
}

first();
second();
third();

1

Bây giờ, bạn đã học được cách thức hoạt động của

setTimeout(function () {
  first();
}, 0);
second();
third();

4, đó là thời gian để tìm hiểu về NO___TRANS___PRE___25 từ khóa, là một bổ sung cho mẫu dựa trên lời hứa.

Đợi chức năng kết thúc bằng cách sử dụng từ khóa Async/Await

Các từ khóa NO___TRANS___PRE___25 được sử dụng để thay thế mẫu chuỗi Promise bằng mẫu NO___TRANS___PRE___25.

Như bạn đã biết từ NO___TRANS___PRE___24 Giải thích ở trên, bạn cần chuỗi cuộc gọi đến chức năng trả về các hàm no___trans___pre___24 bằng các hàm NO___Trans___Pre___68.

Từ khóa NO___Trans___Pre___69 cho phép bạn đợi cho đến khi đối tượng NO___Trans___PRE___24 được giải quyết hoặc từ chối:

Tuy nhiên, từ khóa NO___TRANS___PRE___69 phải được sử dụng bên trong NO___Trans___Pre___72. Một chức năng được khai báo với từ khóa NO___Trans___Pre___73 tránh sự cần thiết phải viết một mẫu chuỗi hứa hẹn.

Ở đây, ví dụ đầy đủ về việc sử dụng NO___Trans___PRE___25 trên các chức năng trả về NO___TRANS___PRE___24 Đối tượng:

function first() {
  console.log("1st");
}

function second() {
  console.log("2nd");
}

function third() {
  console.log("3rd");
}

first();
second();
third();

2

Để lưu trữ giá trị được trả về bởi đối tượng NO___TRANS___PRE___24, bạn có thể gán cuộc gọi NO___Trans___PRE___69 cho một biến như hiển thị bên dưới:

function first() {
  console.log("1st");
}

function second() {
  console.log("2nd");
}

function third() {
  console.log("3rd");
}

first();
second();
third();

3

Để xử lý câu trả lời NO___Trans___PRE___47 bằng NO___Trans___Pre___69, bạn cần kết thúc cuộc gọi bằng khối NO___Trans___PRE___80:

function first() {
  console.log("1st");
}

function second() {
  console.log("2nd");
}

function third() {
  console.log("3rd");
}

first();
second();
third();

4

Không có khối NO___TRANS___PRE___80, cuộc gọi no___trans___pre___47 sẽ gây ra lỗi NO___TRANS___PRE___83.

Sự kết luận

JavaScript hiện đại cho phép bạn chờ đợi một chức năng hoàn thành trước khi thực hiện đoạn mã tiếp theo.

Trong khi mẫu gọi lại hoạt động, nó giới thiệu mức độ phức tạp cao dẫn đến một địa ngục gọi lại.

Cuộc gọi không đồng bộ dựa trên NO___TRANS___PRE___24 giúp cải thiện mẫu gọi lại, cho phép bạn gọi tuần tự các chức năng của mình trong khi giữ mã trực quan và dễ bị lỗi.

Ngoài ra, bạn có thể sử dụng từ khóa NO___Trans___PRE___25 để xóa mẫu chuỗi hứa hẹn khỏi mã của bạn.

Bây giờ bạn đã học cách chờ đợi một chức năng hoàn thành bằng cách sử dụng JavaScript. Công việc tuyệt vời! 😉

JavaScript có chờ chức năng kết thúc trước khi tiếp tục không?

Bạn sẽ thường xuyên bắt gặp sự cần thiết phải chờ một chức năng kết thúc trước khi bắt đầu một chức năng khác trong JavaScript. Nhưng điều này đôi khi có thể là một thách thức để đạt được vì JavaScript không chờ đợi mã không đồng bộ - thông thường, nhận và gửi dữ liệu khi thực hiện cuộc gọi API.JavaScript doesn't wait for asynchronous code – typically, getting and sending data when making an API call.JavaScript doesn't wait for asynchronous code – typically, getting and sending data when making an API call.

Có chờ đợi chức năng để hoàn thành?

Đợi chức năng kết thúc bằng cách sử dụng từ khóa Async/Await Từ khóa đang chờ đợi cho phép bạn đợi cho đến khi đối tượng Promise được giải quyết hoặc từ chối: chờ trước ();thứ hai();Tuy nhiên, từ khóa đang chờ phải được sử dụng bên trong hàm Async.The await keyword allows you to wait until the Promise object is resolved or rejected: await first(); second(); However, the await keyword must be used inside an async function .The await keyword allows you to wait until the Promise object is resolved or rejected: await first(); second(); However, the await keyword must be used inside an async function .

JavaScript có chức năng chờ không?

Sự kết luận.JavaScript có thể không có chức năng ngủ hoặc chờ, nhưng thật dễ dàng để tạo hàm hoặc viết một dòng mã bằng cách sử dụng hàm setTimeOut () sẵn có miễn là bạn rất cẩn thận về mã và cách bạn sử dụng.JavaScript may not have a sleep or wait function, but it is easy enough to create a function or write a single line of code using an inbuilt setTimeout() function as long as you are very careful about the code and how you use it.JavaScript may not have a sleep or wait function, but it is easy enough to create a function or write a single line of code using an inbuilt setTimeout() function as long as you are very careful about the code and how you use it.

Làm thế nào để bạn chờ đợi một chức năng hoàn thành?

Sử dụng async/chờ đợi để chờ một chức năng kết thúc trước khi tiếp tục thực hiện.Một cách khác để chờ đợi một chức năng thực thi trước khi tiếp tục thực hiện trong môi trường không đồng bộ trong JavaScript là sử dụng Async/Wait. to Wait for a Function to Finish Before Continuing Execution. Another way to wait for a function to execute before continuing the execution in the asynchronous environment in JavaScript is to use async/wait . to Wait for a Function to Finish Before Continuing Execution. Another way to wait for a function to execute before continuing the execution in the asynchronous environment in JavaScript is to use async/wait .

programming javascript Async/await trong JavaScript Promise trong Javascript Async trong JavaScript Async/await Nodejs Async/await TypeScript Async/await la gì Async/await call API Async/await JavaScript example

Hướng dẫn wait trong javascript - đợi trong javascript

Chờ chức năng kết thúc bằng cách sử dụng các chức năng gọi lại

Chờ chức năng kết thúc bằng cách sử dụng đối tượng Promise

Đợi chức năng kết thúc bằng cách sử dụng từ khóa Async/Await

Sự kết luận

JavaScript có chờ chức năng kết thúc trước khi tiếp tục không?

Có chờ đợi chức năng để hoàn thành?

JavaScript có chức năng chờ không?

Làm thế nào để bạn chờ đợi một chức năng hoàn thành?

Bài Viết Liên Quan

Quảng Cáo

Có thể bạn quan tâm

Toplist được quan tâm

Quảng cáo

Xem Nhiều

Quảng cáo

Chúng tôi

Điều khoản

Trợ giúp

Mạng xã hội