Các hàm gọi lại trong JavaScript - Các hàm gọi lại trong JS là gì và cách sử dụng chúng

Nếu bạn đã quen thuộc với lập trình, bạn đã biết những chức năng làm và cách sử dụng chúng. Nhưng hàm gọi lại là gì? Các hàm gọi lại là một phần quan trọng của JavaScript và một khi bạn hiểu cách hoạt động của các hàm gọi lại, bạn sẽ trở nên tốt hơn nhiều trong JavaScript.

Vì vậy, trong bài đăng này, tôi muốn giúp bạn hiểu các hàm gọi lại là gì và cách sử dụng chúng trong JavaScript bằng cách xem qua một số ví dụ.

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

Trong JavaScript, các hàm là các đối tượng. Chúng ta có thể truyền các đối tượng cho các hàm dưới dạng tham số không? Đúng.

Vì vậy, chúng ta cũng có thể truyền các hàm dưới dạng tham số cho các hàm khác và gọi chúng bên trong các hàm bên ngoài. Có vẻ phức tạp? Hãy để tôi cho thấy điều đó trong một ví dụ dưới đây:

function print(callback) { callback(); }

Hàm print () nhận một hàm khác làm tham số và gọi nó vào bên trong. Điều này hợp lệ trong JavaScript và chúng tôi gọi nó là "gọi lại". Vì vậy, một hàm được truyền cho một hàm khác như một tham số là một hàm gọi lại. Nhưng đó không phải là tất cả.

Bạn cũng có thể xem phiên bản video của các chức năng gọi lại bên dưới:

Tại sao chúng ta cần Hàm gọi lại?

JavaScript chạy mã tuần tự theo thứ tự từ trên xuống. Tuy nhiên, có một số trường hợp mã chạy (hoặc phải chạy) sau khi một cái gì đó khác xảy ra và cũng không tuần tự. Đây được gọi là lập trình không đồng bộ.

Các lệnh gọi lại đảm bảo rằng một hàm sẽ không chạy trước khi một tác vụ được hoàn thành nhưng sẽ chạy ngay sau khi tác vụ đã hoàn thành. Nó giúp chúng tôi phát triển mã JavaScript không đồng bộ và giúp chúng tôi an toàn trước các sự cố và lỗi.

Trong JavaScript, cách để tạo một hàm gọi lại là chuyển nó dưới dạng một tham số cho một hàm khác và sau đó gọi lại nó ngay sau khi điều gì đó đã xảy ra hoặc một số nhiệm vụ hoàn thành. Hãy xem cách…

Cách tạo Gọi lại

Để hiểu những gì tôi đã giải thích ở trên, hãy để tôi bắt đầu với một ví dụ đơn giản. Chúng tôi muốn ghi một tin nhắn vào bảng điều khiển nhưng nó sẽ có sau 3 giây.

const message = function() { console.log("This message is shown after 3 seconds"); } setTimeout(message, 3000);

Có một phương thức tích hợp sẵn trong JavaScript gọi là “setTimeout”, phương thức này gọi một hàm hoặc đánh giá một biểu thức sau một khoảng thời gian nhất định (tính bằng mili giây). Vì vậy, ở đây, chức năng "thông báo" đang được gọi sau 3 giây trôi qua. (1 giây = 1000 mili giây)

Nói cách khác, hàm thông báo đang được gọi sau khi điều gì đó xảy ra (sau 3 giây trôi qua đối với ví dụ này), chứ không phải trước đó. Vì vậy, hàm tin nhắn là một ví dụ về hàm gọi lại.

Chức năng ẩn danh là gì?

Ngoài ra, chúng ta có thể định nghĩa một hàm trực tiếp bên trong một hàm khác, thay vì gọi nó. Nó sẽ trông giống thế này:

setTimeout(function() { console.log("This message is shown after 3 seconds"); }, 3000);

Như chúng ta có thể thấy, hàm gọi lại ở đây không có tên và định nghĩa hàm không có tên trong JavaScript được gọi là “hàm ẩn danh”. Điều này thực hiện chính xác nhiệm vụ giống như ví dụ ở trên.

Gọi lại dưới dạng một hàm mũi tên

Nếu muốn, bạn cũng có thể viết hàm gọi lại tương tự như một hàm mũi tên ES6, là một loại hàm mới hơn trong JavaScript:

setTimeout(() => { console.log("This message is shown after 3 seconds"); }, 3000);

Sự kiện thì sao?

JavaScript là một ngôn ngữ lập trình hướng sự kiện. Chúng tôi cũng sử dụng các hàm gọi lại cho các khai báo sự kiện. Ví dụ: giả sử chúng tôi muốn người dùng nhấp vào nút:

Click here

Lần này, chúng ta sẽ chỉ thấy một thông báo trên bảng điều khiển khi người dùng nhấp vào nút:

document.queryselector("#callback-btn") .addEventListener("click", function() { console.log("User has clicked on the button!"); });

Vì vậy, ở đây chúng tôi chọn nút đầu tiên với id của nó, sau đó chúng tôi thêm trình xử lý sự kiện bằng phương thức addEventListener. Nó có 2 tham số. Tham số đầu tiên là loại của nó, "nhấp chuột" và tham số thứ hai là một hàm gọi lại, ghi lại thông báo khi nút được nhấp.

Như bạn có thể thấy, các hàm gọi lại cũng được sử dụng cho các khai báo sự kiện trong JavaScript.

Gói (lại

Các lệnh gọi lại thường được sử dụng trong JavaScript và tôi hy vọng bài đăng này sẽ giúp bạn hiểu chúng thực sự làm gì và cách làm việc với chúng dễ dàng hơn. Tiếp theo, bạn có thể tìm hiểu về JavaScript Promises, một chủ đề tương tự mà tôi đã giải thích trong bài đăng mới của mình.

Nếu bạn muốn tìm hiểu thêm về phát triển web, hãy theo dõi tôi trên Youtube !

Cảm ơn bạn đã đọc!