Có thể bạn đã thấy một vài đoạn mã sử dụng từ “gọi lại” bên trong một hàm. Lệnh gọi lại là một loại hàm đặc biệt được chuyển vào bên trong một hàm khác.
Các lệnh gọi lại thường được sử dụng bên trong các trình xử lý sự kiện để chạy một khối mã. Trong hướng dẫn này, chúng ta sẽ nói về các hàm gọi lại là gì và cách chúng hoạt động. Chúng tôi sẽ giới thiệu cho các bạn một ví dụ về hàm gọi lại để giúp bạn tìm hiểu cách sử dụng chúng trong mã của mình.
Hàm gọi lại là gì?
Hàm gọi lại là một hàm được truyền dưới dạng tham số vào một hàm khác.
Các hàm gọi lại được chạy trong hàm mà chúng được khai báo. Khi bạn thực thi một hàm, hàm gọi lại của nó, nếu một hàm được chỉ định, sẽ thực thi. Khi nó đã chạy, hàm gọi lại sẽ trả về một phản hồi cho hàm chính.
Các hàm gọi lại hoạt động vì trong JavaScript, mọi hàm đều là một đối tượng. Điều này có nghĩa là chúng ta có thể làm việc với chúng như bất kỳ đối tượng nào khác. Chúng ta có thể gán các hàm cho các biến hoặc chuyển chúng dưới dạng đối số, giống như chúng ta làm với bất kỳ giá trị nào khác.
Hãy sử dụng một ví dụ đơn giản để hiển thị cách hoạt động của lệnh gọi lại. Chúng tôi sẽ tạo một hàm in tên người dùng cho một trò chơi điện tử vào bảng điều khiển, sau đó là loại ký tự của họ. Hãy bắt đầu bằng cách khai báo một hàm:
function printName(name, callback) {
console.log(`Player Name: ${name}`);
callback();
}
Đây là một hàm JavaScript ẩn danh có chứa một lệnh gọi lại. Các hàm ẩn danh là các hàm không có tên. Chúng thường xuất hiện bên trong các hàm khác, như trong ví dụ trên.
Gọi lại này là tham số thứ hai trong mã của chúng tôi. Khi chức năng này được chạy, tên của trình phát của chúng tôi sẽ được in ra bảng điều khiển. Sau đó, nội dung của hàm callback () của chúng ta được thực thi.
81% người tham gia cho biết họ cảm thấy tự tin hơn về triển vọng công việc công nghệ của mình sau khi tham gia một cuộc thi đào tạo. Kết hợp với bootcamp ngay hôm nay.
Sinh viên tốt nghiệp bootcamp trung bình dành ít hơn sáu tháng để chuyển đổi nghề nghiệp, từ khi bắt đầu bootcamp đến khi tìm được công việc đầu tiên của họ.
Bây giờ, hãy sử dụng chức năng này:
printName("Violet", function() {
console.log("Character Type: Mage");
})
Chúng tôi đã gọi hàm printName() trong mã này. Chúng tôi đã chỉ định "Violet" làm tên của người chơi. Chúng tôi đã chỉ định một hàm in ra loại ký tự làm lệnh gọi lại. Hãy chạy mã này và xem điều gì sẽ xảy ra:
Tên người chơi:Violet
Loại nhân vật:Mage
Nội dung của printName() hàm được thực thi, theo sau là nội dung của hàm gọi lại của chúng tôi. Các hàm gọi lại không cần phải được khai báo khi bạn chuyển chúng dưới dạng một tham số. Chúng tôi có thể cấu trúc lại mã của mình để hàm gọi lại của chúng tôi là của riêng nó:
function printCharacterType() {
console.log("Character Type: Mage");
}
printName("Violet", printCharacterType())
Mã này sẽ trả về cùng một phản hồi. Chúng tôi đã tạo một hàm có tên là printCharacterType() in kiểu ký tự của người chơi vào bảng điều khiển. Hàm này được thực thi khi chúng ta chạy printName() , vì nó được chỉ định là một cuộc gọi lại.
Sử dụng Gọi lại với Sự kiện
Gọi lại thường được sử dụng với các sự kiện JavaScript.
Sự kiện lắng nghe một hành động, chẳng hạn như người dùng nhấp vào một nút và chạy một khối mã khi hành động đó được thực hiện. Hãy tạo một lệnh gọi lại chạy khi người dùng di chuột qua một hình ảnh. Mở tệp HTML và dán mã sau vào trong thẻ
:
<img src=“ https://careerkarma.com/favicon.ico ” id=“image” />
Điều này xác định một hình ảnh trên trang web mà người dùng có thể nhấp vào. Sau đó, bao gồm mã JavaScript sau trong một <script> nhãn:
var image = document.querySelector("#image")
image.addEventListener("mouseover", function() {
console.log("The user has moused over the image.");
});
Mã này chọn phần tử có ID "hình ảnh". Sau đó, nó sử dụng phương thức addEventListener để lắng nghe khi nào người dùng “di chuột qua” (di chuột qua) hình ảnh. Khi người dùng di chuột qua hình ảnh của họ, một thông báo sẽ được in ra bảng điều khiển:
Người dùng đã di chuột qua hình ảnh.
Sử dụng Gọi lại với Yêu cầu Web
Các yêu cầu web thường cần được thực thi một cách đồng bộ. Điều này là do hầu hết các ứng dụng web cần truy xuất dữ liệu cụ thể trước khi có thể tải phần còn lại của trang.
Hãy tạo một chương trình đưa ra yêu cầu tới API Trình giữ chỗ JSON, một API có dữ liệu giả mà chúng ta có thể sử dụng cho mục đích thử nghiệm. Chương trình của chúng tôi sẽ in phản hồi tới bảng điều khiển. Chúng ta sẽ bắt đầu bằng cách khai báo một hàm thực hiện yêu cầu:
function makeRequest(url, callback) {
var query = await fetch(url).then(res => res.json());
callback(query);
}
Hàm này sẽ thực hiện một yêu cầu web bằng cách sử dụng API tìm nạp (). Phản hồi được gán cho biến "truy vấn". Chúng tôi trả về kết quả của yêu cầu web này cho lệnh gọi lại của chúng tôi bằng cách chuyển “truy vấn” làm đối số trong hàm gọi lại của chúng tôi. Bây giờ, hãy gọi hàm của chúng ta và in phản hồi của nó với bảng điều khiển:
makeRequest("https://jsonplaceholder.typicode.com/posts/1", function(data) {
console.log(data);
});
Mã này hướng dẫn phương thức makeRequest thực hiện yêu cầu đối với API Trình giữ chỗ JSON. Hàm gọi lại của chúng tôi in dữ liệu được trả về từ yêu cầu này tới bảng điều khiển:
{
"userId": 1,
"id": 1,
"title": "sunt aut facere repellat provident occaecati excepturi optio reprehenderit",
"body": "quia et suscipit\nsuscipit recusandae consequuntur expedita et cum\nreprehenderit molestiae ut ut quas totam\nnostrum rerum est autem sunt rem eveniet architecto."
}
Tuyệt quá! Mã của chúng tôi đã thực hiện một yêu cầu web và in phản hồi của nó tới bảng điều khiển.
Kết luận (và Thách thức)
Lệnh gọi lại cho phép bạn chuyển một hàm làm tham số bên trong một hàm khác. Chúng thường được sử dụng trong trình xử lý sự kiện để chạy mã khi một sự kiện được thực thi hoặc để thực hiện các yêu cầu web.
Bạn đang tìm kiếm một thử thách? Viết một hàm gọi lại thực thi khi một nút được nhấn trên một trang web. Nếu bạn đã làm điều này, hãy thử viết một hàm sắp xếp danh sách các mục và sử dụng hàm gọi lại để in từng mục ra bảng điều khiển.
Bây giờ, bạn đã sẵn sàng để bắt đầu sử dụng lệnh gọi lại JavaScript để lập trình không đồng bộ như một chuyên gia!