HomeLập trìnhJavaScriptHàm gọi lại...

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


Bài viết này giới thiệu ngắn gọn về khái niệm và cách sử dụng hàm gọi lại trong ngôn ngữ lập trình JavaScript.

Chức năng là đối tượng

Điều đầu tiên chúng ta cần biết là trong Javascript, hàm là đối tượng hạng nhất. Như vậy, chúng ta có thể làm việc với chúng giống như cách chúng ta làm việc với các đối tượng khác, chẳng hạn như gán chúng cho các biến và chuyển chúng dưới dạng đối số vào các hàm khác. Điều này rất quan trọng, vì đây là kỹ thuật thứ hai cho phép chúng tôi mở rộng chức năng trong các ứng dụng của mình.

Chức năng gọi lại

Một chức năng gọi lại là một chức năng được thông qua như một đối số đến một chức năng khác, để được “gọi lại” sau đó. Một hàm chấp nhận các hàm khác làm đối số được gọi là hàm bậc caochứa logic cho khi nào chức năng gọi lại được thực thi. Chính sự kết hợp của hai điều này cho phép chúng tôi mở rộng chức năng của mình.

Để minh họa các cuộc gọi lại, hãy bắt đầu với một ví dụ đơn giản:

function createQuote(quote, callback){ 
  var myQuote = "Like I always say, " + quote;
  callback(myQuote); // 2
}

function logQuote(quote){
  console.log(quote);
}

createQuote("eat your vegetables!", logQuote); // 1

// Result in console: 
// Like I always say, eat your vegetables!

Trong ví dụ trên, createQuote là hàm bậc cao hơn, chấp nhận hai đối số, đối số thứ hai là hàm gọi lại. Các logQuote đang được sử dụng để chuyển vào dưới dạng chức năng gọi lại của chúng tôi. Khi chúng tôi thực hiện createQuote chức năng (1)lưu ý rằng chúng tôi là không nối thêm dấu ngoặc đơn để logQuote khi chúng tôi chuyển nó vào như một đối số. Điều này là do chúng tôi không muốn thực thi hàm gọi lại của mình ngay lập tức, chúng tôi chỉ muốn chuyển định nghĩa hàm cùng với hàm bậc cao hơn để nó có thể được thực thi sau.

Đọc thêm  Bản đồ JavaScript() 方法解析

Ngoài ra, chúng ta cần đảm bảo rằng nếu hàm gọi lại mà chúng ta chuyển vào các đối số mong đợi, thì chúng ta sẽ cung cấp các đối số đó khi thực hiện cuộc gọi lại (2). Trong ví dụ trên, đó sẽ là callback(myQuote); tuyên bố, vì chúng tôi biết rằng logQuote mong đợi một báo giá được thông qua.

Ngoài ra, chúng ta có thể chuyển các hàm ẩn danh dưới dạng gọi lại. Cuộc gọi dưới đây đến createQuote sẽ có kết quả tương tự như ví dụ trên:

createQuote("eat your vegetables!", function(quote){ 
  console.log(quote); 
});

Ngẫu nhiên, bạn không để sử dụng từ “gọi lại” làm tên đối số của bạn, Javascript chỉ cần biết rằng đó là tên đối số chính xác. Dựa trên ví dụ trên, chức năng bên dưới sẽ hoạt động theo cách chính xác như vậy.

function createQuote(quote, functionToCall) { 
  var myQuote = "Like I always say, " + quote;
  functionToCall(myQuote);
}

Tại sao nên sử dụng chức năng Gọi lại?

Hầu hết thời gian chúng tôi đang tạo các chương trình và ứng dụng hoạt động trong một đồng bộ thái độ. Nói cách khác, một số hoạt động của chúng tôi chỉ được bắt đầu sau khi những hoạt động trước đó đã hoàn thành. Thông thường, khi chúng tôi yêu cầu dữ liệu từ các nguồn khác, chẳng hạn như API bên ngoài, chúng tôi không phải lúc nào cũng biết khi nào dữ liệu của chúng tôi sẽ được phục vụ trở lại. Trong những trường hợp này, chúng tôi muốn đợi phản hồi nhưng không phải lúc nào chúng tôi cũng muốn toàn bộ ứng dụng của mình bị dừng trong khi dữ liệu của chúng tôi đang được tìm nạp. Những tình huống này là nơi các chức năng gọi lại có ích.

Đọc thêm  Hướng dẫn cơ bản về các phương thức mảng JavaScript

Hãy xem một ví dụ mô phỏng yêu cầu tới máy chủ:

function serverRequest(query, callback){
  setTimeout(function(){
    var response = query + "full!";
    callback(response);
  },5000);
}

function getResults(results){
  console.log("Response from the server: " + results);
}

serverRequest("The glass is half ", getResults);

// Result in console after 5 second delay:
// Response from the server: The glass is half full!

Trong ví dụ trên, chúng tôi tạo một yêu cầu giả tới máy chủ. Sau 5 giây trôi qua, phản hồi được sửa đổi và sau đó chức năng gọi lại của chúng tôi getResults được thực hiện. Để thấy điều này hoạt động, bạn có thể sao chép/dán đoạn mã trên vào công cụ dành cho nhà phát triển của trình duyệt và thực thi nó.

Ngoài ra, nếu bạn đã quen thuộc với setTimeout, thì bạn đã sử dụng các chức năng gọi lại từ lâu. Đối số hàm ẩn danh được chuyển vào ví dụ trên setTimeout cuộc gọi chức năng cũng là một cuộc gọi lại! Vì vậy, cuộc gọi lại ban đầu của ví dụ thực sự được thực hiện bởi một cuộc gọi lại khác. Hãy cẩn thận để không lồng quá nhiều cuộc gọi lại nếu bạn có thể giúp nó, vì điều này có thể dẫn đến một thứ gọi là “địa ngục cuộc gọi lại”! Như tên của nó, nó không phải là một niềm vui để giải quyết.



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