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

Hàm gọi lại JavaScript – 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 các chức năng làm gì và cách sử dụng chúng. Nhưng chức năng gọi lại là gì? Hàm gọi lại là một phần quan trọng của JavaScript và khi bạn hiểu cách thức hoạt động của hàm gọi lại, bạn sẽ trở nên giỏi 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 chức năng 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ụ.

Chức năng gọi lại là gì?

Trong JavaScript, hàm là đối tượng. Chúng ta có thể truyền đối tượng cho 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. Nghe có vẻ phức tạp? Hãy để tôi chỉ ra đ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ó 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 dưới dạng tham số là hàm gọi lại. Nhưng đó không phải là tất cả.

Đọc thêm  Làm cách nào để xử lý các cuộc gọi lại không đồng bộ trong JavaScript...Không có cuộc gọi lại?

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 có sự cố khác xảy ra và cũng không theo trình tự. Điều này được gọi là lập trình không đồng bộ.

Các cuộc gọi lại đảm bảo rằng một chức năng sẽ không chạy trước khi một tác vụ hoàn thành mà 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ữ cho 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 tham số cho một hàm khác, sau đó gọi lại ngay sau khi có điều gì đó xảy ra hoặc một số tác vụ được hoàn thành. Hãy xem cách…

Cách tạo một cuộc 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ẽ ở đó 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 có tên là “setTimeout”, 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 “tin nhắn” được gọi sau 3 giây trôi qua. (1 giây = 1000 mili giây)

Đọc thêm  Async Await JavaScript Tutorial – Cách đợi một chức năng kết thúc trong JS

Nói cách khác, chức năng tin nhắn đang được gọi sau khi có đ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, chức năng thông báo là một ví dụ về chức năng 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 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ư hàm mũi tên ES6, đây là một loại hàm mới hơn trong JavaScript:

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

Còn về 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 chức năng gọi lại để 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:

<button id="callback-btn">Click here</button>

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, trước tiên chúng tôi chọn nút có 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. Phải mất 2 tham số. Tham số đầu tiên là loại của nó, “nhấp chuột”, và tham số thứ hai là chức năng gọi lại, ghi lại thông báo khi nhấp vào nút.

Đọc thêm  Kiểm tra loại JavaScript – Cách kiểm tra loại trong JS với typeof()

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

Gói (lại

Gọi lại được sử dụng thường xuyên trong JavaScript và tôi hy vọng bài đăng này sẽ giúp bạn hiểu những gì chúng thực sự làm 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, vui lòng theo dõi tôi trên Youtube!

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



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