Callback là gì? Nguyên Tắc Thực Hiện Callback?

Callback là gì? LANIT sẽ giúp bạn hiểu tổng quát về Callback trong Javascript, phân loại và cách sử dụng căn bản.

Callback là gì?

Hàm callback là ý tưởng được lấy từ việc sử dụng hàm như một đối số trong lập trình. Trong JavaScript, mọi hàm được coi là một đối tượng hạng nhất, chúng được đối xử giống như các đối tượng khác như chuỗi, số và có thể sử dụng làm tham số cho một hàm khác. Đây chính là cơ sở cho khái niệm về Callback function.

Callback là gì? Vì sao cần Callback?
Callback là gì?

Callback function là việc bạn chuyển một đoạn mã (Hàm A) vào một đoạn mã khác (Hàm B). Sau đó, tại thời điểm nào đó, Hàm A sẽ được Hàm B gọi lại (callback). Trong JavaScript, điều này quan trọng bởi ngôn ngữ này hướng sự kiện và bất đồng bộ.

Phân loại Callback

Callback trong Javascript chia thành 2 loại: synchronous (xử lý đồng bộ)asynchronous (xử lý không đồng bộ).

  • Synchronous callback hay blocking callback – là khi Higher-Order Function không hoàn thành cho đến khi callback chạy xong. Hàm greet() là một callback đồng bộ vì nó chạy đồng thời với hàm bậc cao map().
  • Asynchronous callback hay non-blocking callback – là khi Higher-Order Function hoàn thành và không đợi callback chạy ngay lập tức.

Cách thức hoạt động của Callback

Một hàm hỗ trợ callback function sẽ gọi và thực thi hàm callback trong quá trình xử lý của nó, nhưng đứng vị trí nào trong hàm, chúng ta không biết trước, trừ khi tự viết. Khi truyền tham số cho callback function, chúng phụ thuộc vào hàm cha. Chúng ta có thể truyền callback giống như truyền tham số thông thường, mà không cần “()” sau tên hàm. Điều này giúp callback không được thực thi ngay lập tức, chỉ là một tham số được truyền vào.

Nguyên tắc thực hiện Callback

Tham số vào cần phải là Function

Điều này quan trọng vì nếu bạn không kiểm tra giá trị người dùng truyền vào có phải là một hàm không. Nếu không kiểm tra, bạn sẽ không thể thực thi được và đây là sự khác biệt giữa lập trình viên mới và lập trình viên có kinh nghiệm.

Chú ý “this” khi Callback nằm trong object

Trong đối tượng, hàm xây dựng được tạo bằng cách định nghĩa một khóa và gán giá trị của khóa đó bằng một hàm.

Theo nguyên tắc, hàm callback trong Javascript là hàm đơn phương, nên khi sử dụng từ khóa “this” trong hàm, nó sẽ hiểu là Window Object. Do đó, dù bạn đặt hàm callback trong một đối tượng, bạn không thể truy cập dữ liệu của đối tượng bằng từ khóa “this”.

Khắc phục “this” 

Chúng ta có thể sử dụng cú pháp sau để khắc phục “this” khi callback nằm trong object

Ví dụ:

// Trước đây
callback(var1, var2, …);
// Bây giờ
callback.apply(callbackObject, [var1, var2, … ]);

Bên dưới là đoạn code sửa lỗi trên:

// Object chứa hàm callback
var personInfo = {
    name : ‘khoa’,
    setName : function(name){
        // giá trị này sẽ không có tác dụng với key name trong object này
        // nếu như ta sử dụng nó là một callback function
        this.name = name;
    }
};
// Hàm có tham số callback
function test(callback, callbackObject){
    var name = “Nguyễn Đình Khoa”;
    callback.apply(callbackObject, [name]);
}
// Gọi đến hàm và truyền hàm callback vào
test(personInfo.setName, personInfo);
// Kết quả: Nguyễn Đình Khoa
document.write(personInfo.name);

Callback Hell

Trong trường hợp Callback bên trong Callback khác thì bạn đã gặp phải Callback Hell hay địa ngục Callback và vấn đề này thường xảy ra khi xử lí các lệnh không đồng bộ.

Khi callback hell xuất hiện, logic xử lý của chương trình trở nên rất phức tạp và khó hiểu. Khi có lỗi, việc debug và giải quyết trở nên khó khăn. Ngoài ra, callback hell làm cho code trở nên kém thẩm mỹ, khó đọc và khó bảo trì. Để giải quyết vấn đề này, bạn có thể tìm hiểu thêm về promise và async/await!

Vì sao cần Callback?

Bởi Javascript là ngôn ngữ thực hiện các sự kiện. Thay vì chờ phản hồi, mỗi lần thực thi, Javascript tiếp tục thực hiện các lệnh, đồng thời đợi phản hồi từ các sự kiện khác.

Trong trường hợp function thứ nhất tốn nhiều thời gian và phức tạp hơi khi thực thi thì lúc này chúng ta cần sử dụng callback trong Javascript để đảm bảo quá trình diễn ra theo thứ tự mà mình mong muốn.

Cách tạo Callback

Mở Chrome Developer Console. Nhấn tổ hợp phím: 

  • Ctrl +Shift+J (Windows)
  • Cmd+Option +J (Mac)

Sau đó nhập khai báo hàm vào Console.log:

function doHomework(subject) {
  alert(Starting my ${subject} homework.);
}

Tạo một hàm doHomework() có một biến là đối tượng mà chúng ta đang làm việc. Để gọi hàm của bạn, hãy nhập thông tin sau vào console.log:

doHomework(‘math’);
// Alerts: Starting my math homework.

Add thêm Callback như một tham số của function. Callback trong trường hợp này sẽ được định nghĩa là đối số thứ hai trong lệnh gọi function doHomework ()

function doHomework(subject, callback) {
  alert(Starting my ${subject} homework.);
  callback();
}
doHomework(‘math’, function() {
  alert(‘Finished my homework’);
});

Nếu nhập mã vào console.log, bạn sẽ nhận được hai thông báo: “Starting my math Homework” trước và “Finished my homework” sau đó. Tuy nhiên, callback functions không nhất thiết phải được xác định trong lệnh gọi hàm. Chúng có thể được định nghĩa ở một vị trí khác trong mã của chúng ta, như sau:

function doHomework(subject, callback) {
  alert(Starting my ${subject} homework.);
  callback();
}
function alertFinished(){
  alert(‘Finished my homework’);
}
doHomework(‘math’, alertFinished);

Kết quả là hoàn toàn giống nhau, chỉ có một chút khác biệt trong thiết lập. Như vậy, chúng ta đã truyền định nghĩa hàm alertFinished như là một đối số bên trong lệnh gọi hàm doHomework().

Lưu ý: Callback trong Javascript phải là một hàm; nếu bạn truyền một kiểu khác, bạn sẽ nhận được thông báo lỗi “Callback is function” trong console. Từ khóa “this” trong callback thường được hiểu là Window Object, ngay cả khi bạn định nghĩa callback trong một object, không thể truy cập dữ liệu của object bằng từ khóa “this”.

Kết luận

Trên đây là bài viết tìm hiểu Callback là gì? LANIT hy vọng các bạn đã có cái nhìn tổng quan về khái niệm này. Nếu còn bất cứ điều gì thắc mắc thì đừng ngại ngần để lại bình luận nhé!

avata Hải

Triệu Huyền Trang

Triệu Huyền Trang chuyên gia 3 năm kinh nghiệm trong ngành Công Nghệ, Phần Mềm. Chuyên chia sẻ các kiến thức phần mềm mã nguồn, ứng dụng và thông tin về công nghệ hữu ích.

Chat với chúng tôi qua Zalo!
Chat với chúng tôi qua Zalo!