Bạn có thể đã thấy một vài đoạn mã dùng từ "callback" bên trong một hàm. Callback là một loại hàm đặc biệt được truyền vào bên trong một hàm khác.
Callback thường được dùng bên trong trình xử lý sự kiện (event handlers) để chạy một khối mã. Trong hướng dẫn này, chúng ta sẽ nói về hàm callback là gì và cách chúng hoạt động. Chúng ta sẽ đi qua một ví dụ về hàm callback để giúp bạn học cách dùng chúng trong mã của mình.
Hàm Callback là gì?
Hàm callback là một hàm được truyền như một tham số vào một hàm khác.
Hàm callback được chạy bên trong hàm mà chúng được khai báo. Khi bạn thực thi một hàm, hàm callback của nó (nếu có được chỉ định) sẽ thực thi. Sau khi chạy xong, hàm callback sẽ trả về phản hồi cho hàm chính.
Hàm callback hoạt động được 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 hàm cho biến, hoặc truyền chúng như đối số, giống như chúng ta làm với bất kỳ giá trị nào khác.
Hãy dùng một ví dụ đơn giản để chỉ cách callback hoạt động. Chúng ta sẽ tạo một hàm in ra tên người chơi game ra console, theo sau là loại nhân vật của họ. Hãy bắt đầu bằng việc khai báo hàm:
function printName(name, callback) { console.log(`Player Name: ${name}`); callback(); } Đây là một hàm JavaScript vô danh chứa một callback. Hàm vô danh là 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.
Callback này là tham số thứ hai trong mã của chúng ta. Khi hàm này chạy, tên người chơi được in ra console. Sau đó, nội dung của hàm callback() được thực thi.
Bây giờ, hãy sử dụng hàm này:
printName("Violet", function() { console.log("Character Type: Mage"); }) Chúng ta đã gọi hàm printName() trong mã này. Chúng ta đã chỉ định "Violet" làm tên người chơi. Chúng ta đã chỉ định một hàm in ra loại nhân vật làm callback. Hãy chạy mã này và xem gì xảy ra:
Player Name: Violet
Character Type: Mage
Nội dung của hàm printName() được thực thi, theo sau là nội dung của hàm callback của chúng ta. Hàm callback không cần được khai báo khi bạn truyền chúng như tham số. Chúng ta có thể tái cấu trúc mã để hàm callback tách riêng:
function printCharacterType() { console.log("Character Type: Mage"); } printName("Violet", printCharacterType()) Mã này sẽ trả về kết quả giống nhau. Chúng ta đã tạo hàm printCharacterType() in loại nhân vật của người chơi ra console. Hàm này được thực thi khi chúng ta chạy printName(), vì nó được chỉ định như một callback.
Sử dụng Callback với Sự kiện (Events)
Callback thường được dùng với các sự kiện JavaScript.
Sự kiện lắng nghe một hành động, như người dùng nhấp vào 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 callback chạy khi người dùng di chuột qua một hình ảnh. Mở file HTML và dán mã sau vào trong thẻ <body>:
<img src=“https://careerkarma.com/favicon.ico” id=“image” />
Điều này định nghĩa một hình ảnh trên trang web mà người dùng có thể nhấp. Sau đó, bao quanh mã JavaScript sau bằng thẻ <script>:
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ử với ID "image". Sau đó nó dùng phương thức addEventListener để lắng nghe khi người dùng "di chuột qua" (hover) hình ảnh. Khi người dùng di chuột qua hình ảnh với con trỏ, một thông báo sẽ được in ra console:
The user has moused over the image.
Sử dụng Callback với Yêu cầu Web (Web Requests)
Yêu cầu web thường cần được thực thi theo cách đồng bộ (synchronous). Điều này là vì hầu hết các ứng dụng web cần truy xuất dữ liệu cụ thể trước khi phần còn lại của trang có thể tải.
Hãy tạo một chương trình yêu cầu đến JSON Placeholder API, một API với dữ liệu giả dùng để kiểm tra. Chương trình của chúng ta nên in phản hồi ra console. Chúng ta sẽ bắt đầu bằng việc khai báo 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ẽ tạo yêu cầu web dùng fetch() API. Phản hồi được gán cho biến "query". Chúng ta trả kết quả yêu cầu web này cho callback bằng cách truyền "query" như đối số trong hàm callback. Bây giờ, hãy gọi hàm và in phản hồi ra console:
makeRequest("https://jsonplaceholder.typicode.com/posts/1", function(data) { console.log(data); }); Mã này yêu cầu phương thức makeRequest tạo yêu cầu đến JSON Placeholder API. Hàm callback in dữ liệu trả về từ yêu cầu này ra console:
{ "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 vời! Mã của chúng ta đã tạo yêu cầu web và in phản hồi ra console.
Kết luận (và Thử thách)
Callback cho phép bạn truyền một hàm như tham số bên trong một hàm khác. Chúng thường được dùng trong trình xử lý sự kiện để chạy mã khi sự kiện được thực thi hoặc để tạo yêu cầu web.
Bạn đang tìm thử thách? Viết một hàm callback thực thi khi nút được nhấn trên trang web. Nếu bạn đã làm được điều này, hãy thử viết hàm sắp xếp danh sách mục và dùng hàm callback để in từng mục ra console.
Bây giờ bạn đã sẵn sàng để bắt đầu dùng callback JavaScript cho lập trình bất đồng bộ như một chuyên gia!