Hiểu đơn giản về hàm Callback trong Javascript

Admin

23/08/2023

Share

Hàm Gọi lại trong Javascript.

Vậy Callback có nghĩa là gì?

Hãy cùng khám phá về callback qua bài viết này nhé. Dưới đây là một ví dụ để bạn dễ hiểu hơn.

Callback là gì?

Callback là một hàm được thực thi sau khi một hàm khác đã hoàn thành. Điều này xảy ra vì trong JavaScript, hàm được coi là một đối tượng có thể được truyền vào như một đối số và được trả về bởi các hàm khác. Các hàm thực hiện việc này được gọi là higher-order function (hàm bậc cao). Một hàm được truyền vào như một đối số được gọi là hàm callback.

Hơi khó lĩnh hội một chút nhỉ? :D.

Ok, vậy hãy thử xem qua ví dụ về hàm gọi lại nào.

Tại sao chúng ta cần hàm Callback?

Chúng ta cần hàm gọi lại vì một lý do rất quan trọng – JavaScript là ngôn ngữ hướng sự kiện.

JavaScript sẽ tiếp tục chạy trong khi nghe các sự kiện khác diễn ra, không phải đợi phản hồi trước đó.

Hãy xem một ví dụ đơn giản:

function first(){
    console.log("Một");
}
function second(){
    console.log("Hai");
}
first();
second();

Nếu bạn đã học cơ bản về ngôn ngữ lập trình JavaScript, bạn cũng sẽ biết:

Chương trình này sẽ in ra nhật ký sau vào cửa sổ console:

// Một
// Hai

Mọi thứ đều tốt.

Nhưng điều gì sẽ xảy ra nếu hàm first chứa một số loại mã không thể được thực hiện ngay lập tức?

Ví dụ: Khi chúng ta gửi yêu cầu một API request, chúng ta cần đợi một thời gian nhất định để nhận phản hồi.

Để tái hiện hành động này, chúng ta sẽ sử dụng setTimeout.

Đây là một hàm JavaScript kích hoạt một hàm sau một khoảng thời gian cụ thể.

Chúng ta sẽ trì hoãn chức năng của chúng ta trong 5000 mili giây để mô phỏng yêu cầu gọi API.

Code Javascript mới của chúng ta sẽ có dạng như sau:

function first(){
    // Mô phỏng delay code
    setTimeout( function(){
        console.log("Một");
    }, 5000 );
}
function second(){
    console.log("Hai");
}

Bạn không cần phải hiểu cách hàm setTimeout() hoạt động ngay lúc này.

Mọi vấn đề mà bạn nhận thấy là chúng ta đã đưa console.Log(1); vào bên trong hàm setTimeout().

Vậy thì, hiện tại khi chúng ta gọi hàm thì điều gì sẽ xảy ra?

first();
second();
// Hai
// Một

Mặc dù chúng ta đã gọi hàm first() đầu tiên, nhưng lại nhận được kết quả sau hàm second().

JavaScript không thực hiện các hàm của chúng ta theo thứ tự mà chúng ta muốn, mà thay vào đó, nó không đợi phản hồi từ hàm first() trước khi chuyển sang thực hiện second().

Vậy tại sao tôi lại cho bạn nhận thấy điều này?

Bởi vì bạn có thể chỉ cần gọi một hàm khác và hy vọng chúng thực hiện theo đúng trình tự.

Callback là.

Thử tạo hàm Callback trong Javascript

OK, bây giờ hãy thử tạo một hàm gọi lại trong JavaScript.

Hãy khởi động Visual Studio Code > Tạo một tập tin callback.Js và viết đoạn mã sau:.

function doHomework(subject) {
    console.log(`Bắt đầu làm bài tập ${subject}.`);
}

Lưu ý: Dấu ` không phải dấu ‘.

Trên đó, chúng ta đã tạo ra hàm làmBàiTập(). Hàm này có một biến mônHọc.

Sau đó, chúng ta thực hiện cuộc gọi hàm:.

doHomework('Toán');
// Bắt đầu làm bài tập Toán.

Bây giờ, hãy thêm hàm gọi lại làm tham số thứ 2 của hàm doHomework().

Hàm callback sau đó được xác định trong đối số thứ hai của lệnh gọi doHomework() của chúng ta.

function doHomework(subject, callback) {
    console.log(`Bắt đầu làm bài tập ${subject}.`);
    callback();
}
doHomework('math', function() {
    console.log('Làm bài tập xong!');
});

Như các bạn có thể thấy, kết quả là:

// Bắt đầu làm bài tập Toán
// Làm bài tập xong!

Tuy nhiên, hàm callback không luôn được xác định trong hàm gọi của chúng ta.

Chúng có thể được định nghĩa hàm gọi lại ở vị trí khác trong Javascript như sau:.

Hàm làmBàiTập(subject, callback) {.

SetTimeout( function(){.

Console.Log(`Bắt đầu thực hiện bài tập ${subject}.`);

Callback();.

}, 5000);.

Function alertFinished(){.

Console.Log(‘Hoàn thành bài tập!’);.

DoHomework(‘Toán’, alertFinished);.

Kết quả của ví dụ này hoàn toàn tương tự với ví dụ trước, tuy nhiên cấu trúc hơi khác một ít.

// Bắt đầu làm bài tập Toán
// Làm bài tập xong!

Như bạn có thể thấy, chúng ta đã di chuyển định nghĩa của hàm alertFinished() thành đối số trong lệnh gọi hàm doHomework().

Đây là một phương pháp rất phổ biến trong lập trình web và lập trình JavaScript. Tuy nhiên, hãy cẩn thận với callback hell nhé. :D.

Đây chưa phải tất cả về Callback function trong Javascript!

Bây giờ, dựa vào ví dụ trên, có thể bạn đã nắm rõ khái niệm callback và cách mà hàm callback được sử dụng trong Javascript.

Nhưng đây chỉ là phần bề mặt của tảng băng của hàm gọi lại, vẫn còn rất nhiều điều để khám phá!

Nếu bạn có bất cứ câu hỏi hoặc ý kiến nào, hãy để lại nhận xét ở dưới đây nhé.