Tìm hiểu cách hàm gọi lại trong javascript được thực thi sau khi một hàm khác hoàn tất quá trình thực thi. Đọc tiếp để hiểu các ví dụ và những hạn chế.

Bạn đang xem : hàm gọi lại trong javascript là gì

Lệnh gọi lại JavaScript là một hàm sẽ được thực thi sau khi một hàm khác kết thúc quá trình thực thi.

Một định nghĩa chính thức hơn sẽ là – Mọi function được chuyển dưới dạng đối số cho một hàm khác để nó có thể được thực thi trong hàm khác được gọi là hàm gọi lại.

Cần hàm gọi lại

Chúng tôi cần các hàm gọi lại vì nhiều hành động JavaScript asynchronous, , có nghĩa là chúng không thực sự dừng chương trình (hoặc chức năng) từ khi chạy cho đến khi chúng hoàn thành, như bạn có thể đã quen. Thay vào đó, nó sẽ thực thi ở chế độ nền trong khi phần còn lại của mã chạy.

Chúng ta hãy xem một ví dụ trong thế giới thực để hiểu rõ hơn về nó (hàm gọi lại đồng bộ).

Chương trình Sau Đại học: Phát triển Web Full Stack

trong Hợp tác với Caltech CTME

Đăng ký ngay  Chương trình Sau đại học: Phát triển Web Full Stack

Mục đích chính của callback là thực thi mã để phản hồi một sự kiện. Những sự kiện này có thể do người dùng thực hiện, chẳng hạn như nhấp chuột hoặc nhập. Với một lệnh gọi lại, bạn có thể hướng dẫn ứng dụng của mình “thực thi mã này mỗi khi người dùng nhấp vào một phím trên bàn phím”.

const button = document.getElementById (‘button’);
function callback () {
console.log (“Hello world”);
}

button.addEventListener (‘click’, callback);

Trong đoạn mã trên, chúng tôi thêm addEventListener làm một hàm và chúng tôi đang chuyển một hàm gọi lại khác làm đối số. Và khi một sự kiện nhấp chuột được kích hoạt, addEventListener sẽ đăng ký chức năng gọi lại.

Callback_functions_in_JavaScript_1

Thêm một ví dụ! (Hàm gọi lại không đồng bộ)

Nếu bạn muốn tải xuống dữ liệu từ một máy chủ (có thể mất nhiều thời gian), sẽ rất lãng phí nếu chương trình hoặc chức năng của bạn chỉ đóng băng trong khi bạn đợi dữ liệu được tìm nạp. Thay vào đó, thông lệ thường thực hiện thao tác tìm nạp trong nền.

Điều này ngụ ý rằng nếu bạn có hai hàm liên tiếp, một trong số đó là không đồng bộ, thì hàm B sẽ được thực hiện trong khi hàm còn lại vẫn đang chạy. Nếu hàm B phụ thuộc vào dữ liệu mà hàm A đang truy xuất, thì bạn sẽ gặp sự cố.

Xem Thêm  Hàm CONVERT () của SQL Server - sql chuyển đổi varchar thành datetime

async function fetchUsers () {
const resp = await fetch (‘& lt; https: //jsonplaceholder.typicode.com/users>’);
const users = await resp.json () ;
const names = users.map (({login}) = & gt; login);
console.log (names);
}

Từ khóa không đồng bộ được đặt làm tiền tố cho hàm để làm cho hàm không đồng bộ.

Hàm trên tìm nạp dữ liệu người dùng giả của 10 người dùng. Sau đó, chúng tôi đang chuyển đổi nó thành một đối tượng json để trích xuất dữ liệu người dùng.

Các hàm không đồng bộ trả về promise , khi hàm không đồng bộ gặp cụm từ await & lt; promise & gt; (lưu ý rằng fetch () cung cấp một lời hứa), nó sẽ ngừng thực thi cho đến khi lời hứa được giải quyết. Để đọc thêm về lời hứa nhấp vào đây .

Một hàm gọi lại không đồng bộ khác với một hàm không đồng bộ. Hàm high-order thực thi hàm gọi lại không đồng bộ theo cách không bị chặn. Tuy nhiên, trong khi chờ đợi các lời hứa (đang chờ hứa hẹn & gt;) giải quyết, hàm không đồng bộ sẽ ngừng thực thi.

Khóa học miễn phí: JavaScript cho người mới bắt đầu

Tìm hiểu kiến ​​thức cơ bản về JavaScript

Đăng ký ngay Khóa học miễn phí: JavaScript cho người mới bắt đầu

Chúng tôi có thể đặt đây là lệnh gọi lại không đồng bộ bằng cách thêm nó vào một sự kiện, chẳng hạn như một lần nhấp vào nút.

const button = document.getElementById (‘trình tìm nạp’);

button.addEventListaries (‘click’, fetchUsers);

Callback_functions_in_JavaScript_2.

Lồng gọi lại và địa ngục gọi lại

< / span>) hoặc tách mã thành các chức năng khác nhau.

Sử dụng Lời hứa

Chúng tôi phải tạo một lời hứa mới cho mỗi lần gọi lại để chuyển chúng thành lời hứa. Khi gọi lại thành công, chúng tôi có thể giải quyết lời hứa. Nếu gọi lại không thành công, chúng tôi có thể từ chối lời hứa.

function getUserPromise {
const newUser = getUserFromApi (user)

return new Promise ((giải quyết, từ chối) = & gt; {
if (user) {
Giải quyết (người dùng)
} khác {
từ chối (Lỗi mới (‘Không còn người dùng mới!’))
}
})
}

Bây giờ, bạn có thể tạo thêm một hàm nữa và gọi hàm trên dưới dạng gọi lại.

Xem Thêm  Chúng ta có thể tạo các đối tượng trong C không? - cách tạo một đối tượng trong c

Khóa học dành cho nhà phát triển Java Full Stack

Hợp tác với HIRIST và HackerEarth

KHÁM PHÁ KHÓA HỌC Full Stack Java Developer Course

Sử dụng async-await

Chúng ta đã biết cách tạo lệnh gọi lại không đồng bộ trong phần trên.

Chúng ta có thể viết các hàm không đồng bộ như thể chúng đồng bộ (được thực thi tuần tự) với việc sử dụng await vì nó dừng quá trình thực thi cho đến khi lời hứa được giải quyết (thực thi hàm thành công).

const userProfile = async () = & gt; {
const user = await fetchUsers (1) // đối số cho biết số lượng người dùng cần tìm nạp
const updatedAddress = await updateAddress (user)
const pincode = await getPincode ()
const updateUser = await updateUser (user, updatedAdress, pincode)
trả lại người dùng
}

// tìm nạp và cập nhật hồ sơ người dùng
userProfile ()

Bạn cũng có thể lồng các hàm này trong các lời hứa.

Chúng tôi cung cấp Đảm bảo việc làm hoàn chỉnh và hoàn tiền nếu bạn không đảm bảo việc làm trong vòng 6 tháng sau khi tốt nghiệp. Hãy sẵn sàng phỏng vấn với các buổi cố vấn nghề nghiệp toàn diện và căng thẳng trong Chương trình Full Stack Java Developer của chúng tôi. Đăng ký NGAY HÔM NAY!

Kết luận

Chúng tôi đã xem xét nguyên nhân và lý do của các hàm gọi lại trong JavaScript, cùng với các ví dụ sử dụng các hàm đồng bộ và không đồng bộ để hiểu các hàm gọi lại.

Cuối cùng, chúng tôi cũng đã trình bày về các lệnh gọi lại lồng nhau là gì và cách xử lý chúng bằng cách sử dụng các lời hứa và không chờ đợi.

Để tìm hiểu thêm về JavaScript và các tính năng tuyệt vời của nó hỗ trợ trang web, hãy tham gia khóa học Phát triển web toàn ngăn xếp .

Bạn cũng có thể đăng ký trên Nền tảng SkillUp của chúng tôi để cải thiện kiến ​​thức phát triển phần mềm của bạn. Đây là sáng kiến ​​của Simplilearn cung cấp các khóa học trực tuyến miễn phí để giúp bạn trau dồi kỹ năng của mình trong nhiều ngôn ngữ lập trình , bao gồm cả JavaScript.


Xem thêm những thông tin liên quan đến chủ đề hàm gọi lại trong javascript là gì

JavaScript Advance 5 – Function Callback | JMaster.io Trung Tâm Java

alt

  • Tác giả: JMaster Trung Tâm Java
  • Ngày đăng: 2020-11-03
  • Đánh giá: 4 ⭐ ( 9372 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Function Callback là một cách giúp chúng ta truyền 1 hàm phụ vào hàm chính như một tham số. Trong hàm chính đó, sẽ gọi lại hàm phụ khi có kết quả hoặc điều kiện xảy ra để hàm phụ thực thi nhiệm vụ. Đây là tính năng rất là hay của Javascript, Nó giúp chúng ta giải quyết được bài toán.
Xem Thêm  Tạo tệp định dạng (SQL Server) - SQL Server - sql tạo định dạng bảng

Hàm là gì? Hàm trong JavaScript

  • Tác giả: completejavascript.com
  • Đánh giá: 3 ⭐ ( 9968 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Function JavaScript (hàm trong JavaScript) là một thành phần không thể thiếu. Hàm giúp chương trình trở nên rõ ràng, dễ hiểu. Vậy hàm là gì?

JavaScript: Callback là gì?

  • Tác giả: techmaster.vn
  • Đánh giá: 4 ⭐ ( 6795 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

Hàm trong javascript là gì ? Khái niệm và cách sử dụng

  • Tác giả: nguyenvanhieu.vn
  • Đánh giá: 5 ⭐ ( 4237 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Hàm trong javascript là gì ? Tại sao phải sử dụng hàm ? Và sử dụng hàm như thế nào ? Vẫn là ba câu hỏi tuy cũ  nhưng lại mới. Nếu các bạn ….

Hàm gọi lại là gì?

  • Tác giả: qastack.vn
  • Đánh giá: 3 ⭐ ( 8520 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: [Tìm thấy giải pháp!] Các nhà phát triển thường bị nhầm lẫn bởi những gì một cuộc gọi lại là…

Các chức năng gọi lại trong JavaScript: Hướng dẫn chuyên sâu

  • Tác giả: helpex.vn
  • Đánh giá: 4 ⭐ ( 2573 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Các hàm gọi lại JavaScript ; một khái niệm quan trọng khác mà bạn cần phải hiểu để trở thành một nhà phát triển JavaScript thành công. Nhưng tôi chắc chắn rằng sau khi đọc kỹ bài viết này,…

[Tự học Javascript] Giới thiệu: callbacks(gọi lại) trong Javascript

  • Tác giả: cafedev.vn
  • Đánh giá: 4 ⭐ ( 8086 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Để thể hiện việc sử dụng các cuộc gọi lại(callback), lời hứa(promises) và các khái niệm trừu tượng khác, chúng tôi sẽ sử dụng một số phương pháp của trình duyệt: tải tập lệnh và thực hiện các thao tác tài liệu đơn giản.

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

By ads_php