HomeLập trìnhJavaScriptChức năng gọi...

Chức năng gọi lại JavaScript –Giải thích bằng tiếng Anh đơn giản


Mọi người mới bắt đầu sử dụng JavaScript sẽ phải đối mặt với câu hỏi này ít nhất một lần: “Hàm gọi lại là gì?”

Vâng, chúng ta có thể tìm thấy câu trả lời trong từ gọi lại chính nó. Đó là tất cả về việc thông báo cho người gọi sau khi hoàn thành thành công hoặc thất bại một nhiệm vụ.

Trong bài viết này, tôi sẽ ít tập trung hơn vào các khía cạnh kỹ thuật của các cuộc gọi lại và sẽ cố gắng giải thích cách chúng hoạt động bằng ngôn ngữ tự nhiên. Điều này sẽ giúp bạn hiểu thế nào là một callback function là gì và tại sao nó tồn tại.

Nếu bạn là người mới bắt đầu học JavaScript, thì bài viết này chắc chắn là dành cho bạn.

Nếu bạn cũng muốn học từ nội dung video, bài viết này cũng có sẵn dưới dạng video hướng dẫn tại đây: 🙂

Hàm trong JavaScript là một tập hợp các câu lệnh thực hiện một tác vụ. Tập hợp các câu lệnh này có thể tồn tại mà không có chức năng, nhưng việc có chúng trong một chức năng sẽ giúp chúng tôi sử dụng lại tác vụ ở nhiều nơi.

Dưới đây là một ví dụ về hàm nhân đôi một giá trị nếu giá trị đó là một số chẵn. Chúng tôi chuyển một số làm đối số cho hàm. Các câu lệnh bên trong hàm kiểm tra xem đối số có phải là số chẵn hay không. Nếu vậy, nó sẽ nhân đôi nó và trả về kết quả. Nếu không, nó trả về số ban đầu.

function doubleEven(n) {
    if (n % 2 === 0) {
    	return n * 2;
    }
    return n;
}

Bây giờ bạn có thể sử dụng chức năng này ở nhiều nơi mà bạn cần:

doubleEven(10); // Output, 20
doubleEven(5); // Output, 5

Bạn có thể chuyển một hàm làm đối số cho một hàm khác

Trong ví dụ trên, chúng ta đã thấy rằng bạn có thể truyền một số làm đối số cho một hàm. Tương tự như vậy, bạn cũng có thể chuyển một hàm làm đối số. Kiểm tra điều này:

/** 
Let's create a foo function that takes a
function as an argument. Here we invoke 
the passed function bar inside foo's body.
*/
function foo(bar) {
    bar();
}

Được rồi, vậy bây giờ chúng ta gọi foo như thế nào?

/**
Invoke foo by passing a function as an argument.
*/
foo(function() {
    console.log('bar');
}); // Output, bar

Lưu ý rằng chúng ta đã chuyển toàn bộ định nghĩa hàm làm đối số cho foo. Hàm được truyền không có tên. Nó được gọi là một anonymous function.

Khả năng một hàm JavaScript chấp nhận một hàm khác làm đối số là một khía cạnh mạnh mẽ của ngôn ngữ.

Đọc thêm  Cách xây dựng menu đàn accordion bằng HTML, CSS và JavaScript

Người gọi hàm có thể chuyển một hàm khác làm đối số để thực thi dựa trên bất kỳ trình kích hoạt nào. Hãy hiểu nó với Robin and PizzaHub câu chuyện.

pizza
Câu chuyện về Robin và PizzaHub

Robin, một cậu bé đến từ Wonderland, rất thích ăn pizza. Một buổi sáng, anh nhấc điện thoại của mẹ và đặt pizza bằng ứng dụng PizzaHub. Robin chọn món pizza nướng phô mai yêu thích của mình và nhấn nút đặt hàng.

Ứng dụng PizzaHub đăng ký đơn đặt hàng và thông báo cho Robin rằng nó sẽ notify anh ta khi bánh pizza đã sẵn sàng và trên đường đi. Robin, cậu bé hạnh phúc, đợi một lúc và cuối cùng cũng nhận được một notification xác nhận rằng bánh pizza đang trên đường đến!

Vì vậy, nếu chúng ta chia nhỏ câu chuyện, trình tự các sự kiện sẽ diễn ra như sau:

  • robin orders bánh pizza
  • ứng dụng notes down mệnh lệnh
  • PizzaHub prepares bánh pizza, và nó đã sẵn sàng sau một thời gian.
  • ứng dụng notifies Robin, xác nhận pizza đang trên đường đến.

Cơ chế thông báo cho Robin về chiếc bánh pizza hoạt động bằng cách sử dụng callback chức năng.

Hãy viết câu chuyện bằng ngôn ngữ lập trình

Vâng, chúng ta hãy làm điều đó. Chuỗi sự kiện trên là một tập hợp các câu lệnh mà chúng ta có thể đặt một cách logic trong các hàm.

Đầu tiên Robin gọi món pizza. Ứng dụng đăng ký thứ tự bằng cách gọi một chức năng, như sau:

orderPizza('Veg', 'Cheese Barbeque');

Bây giờ orderPizza() chức năng sống ở đâu đó trên máy chủ PizzaHub có thể thực hiện một số hành động này (thực tế nó có thể làm được nhiều hơn thế này nhưng hãy giữ cho nó đơn giản):

function orderPizza(type, name) {
    console.log('Pizza ordered...');
    console.log('Pizza is for preparation');
    setTimeout(function () {
        let msg = `Your ${type} ${name} Pizza is ready! The total bill is $13`;
        console.log(`On the Pizzahub server ${msg}`);
    }, 3000);
}

Các setTimeout chức năng chứng tỏ rằng việc chuẩn bị bánh pizza mất một thời gian. Chúng tôi ghi một tin nhắn trong bảng điều khiển sau khi bánh pizza đã sẵn sàng. Tuy nhiên, có một vấn đề!

Đọc thêm  một hướng dẫn mayúsculas trong JS

Tin nhắn được ghi lại tại PizzaHub bên và Robin tội nghiệp không có bất kỳ manh mối nào về điều đó. Chúng ta cần phải notify anh ta nói rằng bánh pizza đã sẵn sàng.

Giới thiệu chức năng gọi lại

Bây giờ chúng ta cần giới thiệu chức năng gọi lại để cho Robin biết về trạng thái của chiếc bánh pizza. Hãy thay đổi orderPizza để truyền hàm gọi lại làm đối số. Cũng lưu ý rằng chúng tôi đang gọi callback chức năng với thông báo khi bánh pizza đã sẵn sàng:

function orderPizza(type, name, callback) {
    console.log('Pizza ordered...');
    console.log('Pizza is for preparation');
    setTimeout(function () {
        let msg = `Your ${type} ${name} Pizza is ready! The total bill is $13`;
        callback(msg);
    }, 3000);
}

Bây giờ, hãy thay đổi lời gọi của orderPizza chức năng:

orderPizza('Veg', 'Cheese Barbeque', function(message){
	console.log(message);
});

Vì vậy, bây giờ người gọi sẽ được thông báo bằng chức năng gọi lại sau khi bánh pizza đã sẵn sàng. Không phải là rất hữu ích?

Để tóm tắt:

  • Một hàm JavaScript có thể chấp nhận một hàm khác làm đối số.
  • Truyền hàm dưới dạng đối số là một khái niệm lập trình mạnh mẽ có thể được sử dụng để thông báo cho người gọi rằng có điều gì đó đã xảy ra. Nó còn được gọi là chức năng gọi lại.
  • Bạn có thể sử dụng các chức năng gọi lại để thông báo cho người gọi tùy thuộc vào trường hợp sử dụng. Các cuộc gọi lại cũng được sử dụng để thực hiện một số tác vụ tùy thuộc vào trạng thái (đạt, không thành công) của các tác vụ khác.
  • Nhưng hãy cẩn thận – lồng quá nhiều hàm gọi lại có thể không phải là một ý tưởng hay và có thể tạo ra Callback Hell. Chúng ta sẽ tìm hiểu thêm về điều này trong một bài viết sắp tới.
Đọc thêm  Cách sử dụng Bộ lọc, Bản đồ và Giảm để có mã dễ bảo trì hơn

Cảm ơn vì đã đọc! Bạn có thể tìm hiểu thêm từ kho lưu trữ mã nguồn mở này về lập trình không đồng bộ. Đừng quên thử các câu đố.

GitHub – atapas/promise-interview-ready: Tìm hiểu JavaScript Promise theo cách mới. Kho lưu trữ này chứa tất cả các mã nguồn và ví dụ giúp bạn sẵn sàng với những lời hứa, đặc biệt là cho các cuộc phỏng vấn của bạn 😉.

Tìm hiểu Lời hứa JavaScript theo một cách mới. Kho lưu trữ này chứa tất cả các mã nguồn và ví dụ giúp bạn sẵn sàng với những lời hứa, đặc biệt là cho các cuộc phỏng vấn của bạn 😉. – GitHub – atapas/promise-inte…

cdfa9fdb-ae1f-4784-93be-339c6794f31e
Đừng quên cho một ⭐. Nó thúc đẩy.

Đó là tất cả cho bây giờ. Tôi hy vọng bạn đã tìm thấy bài viết này sâu sắc và nhiều thông tin.

Kết nối nào. Bạn có thể theo dõi tôi trên Twitter (@tapasadhikary)trên kênh YouTube của tôi và GitHub (atapas).

Bạn có muốn tìm hiểu thêm về các khái niệm không đồng bộ JavaScript không? Dưới đây là một vài liên kết để giúp bạn ra ngoài:





Zik.vn – Biên dịch & Biên soạn Lại

spot_img

Create a website from scratch

Just drag and drop elements in a page to get started with Newspaper Theme.

Buy Now ⟶

Bài viết liên quang

DMCA.com Protection Status