Callback trong javascript

Callback là gì ?

• Nói một cách đơn giản: Callback là một chức năng sẽ được thực hiện sau khi một chức năng khác đã thực hiện xong. Đó gọi là callback.
• Cụ thể hơn: Trong JavaScript, các hàm là các đối tượng. Do đó, các hàm có thể lấy các hàm làm đối số và có thể được trả về bởi các hàm khác. Các hàm thực hiện điều này được gọi là các hàm bậc cao hơn. Bất kỳ hàm nào được truyền dưới dạng đối số được gọi là hàm gọi lại.

Tại sao cần dùng callback?

JavaScript là ngôn ngữ hướng sự kiện. Điều này có nghĩa là thay vì chờ phản hồi trước khi tiếp tục, JavaScript sẽ tiếp tục thực thi trong khi lắng nghe các sự kiện khác. Hãy xem xét một ví dụ cơ bản:

function first(){
  console.log(1);
}
function second(){
  console.log(2);
}
first();
second();

Như bạn thấy, chức năng đầu tiên được thực hiện trước và chức năng thứ hai được thực hiện sau đó. Kết quả in ra như sau:

// 1
// 2

Nhưng điều gì sẽ xảy ra nếu chức năng đầu tiên chứa một số loại mã không thể được thực thi ngay lập tức? Ví dụ: một yêu cầu API phải gửi yêu cầu sau đó chờ phản hồi. Để mô phỏng hành động này, chúng ta sẽ sử dụng setTimeout. đó là một hàm JavaScript dùng để gọi một hàm sau một khoảng thời gian đã đặt. Chúng ta sẽ trì hoãn chức năng đầu tiên trong 500 mili giây để mô phỏng yêu cầu API. Đoạn code của chúng ta sẽ như thế này:

function first(){
  // Simulate a code delay
  setTimeout( function(){
    console.log(1);
  }, 500 );
}
function second(){
  console.log(2);
}
first();
second();

Tất cả vấn đề là bạn thấy chúng ta đã di chuyển console.log (1); vào bên trong độ trễ 500 mili giây. Vì vậy, những gì xảy ra bây giờ khi chúng ta gọi các chức năng trên?

first();
second();
// 2
// 1

Mặc dù chúng ta đã gọi hàm first() trước, nhưng kết quả của hàm first() lại được hiển thị sau hàm second(). Không phải là Javascript đã không thực thi chức năng theo thứ tự chúng ta muốn. Thay vào đó Javascript đã không chờ phản hồi từ hàm first() trước khi chuyển sang thực thi hàm second(). Vậy tại sao lại có kết quả như vậy? Bởi vì bạn không thể chỉ gọi một chức năng sau một chức năng khác và hi vọng Javascript sẽ thực hiện đúng thứ tự. Callback là một cách để đảm bảo một hàm nhất định không thực thi cho đến khi các hàm khác đã thực hiện xong.

Tạo một Callback như thế nào?

Ta cùng tạo một callback trong Javascript Đầu tiên mở trình duyệt Chrome sau đó ấn tổ hợp phím Ctrl + Shift + J để vào màn hình Chrome Developer Console và viết vào đó đoạn code sau:

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

Đoạn code trên tạo ra một hàm có tên là doHomeWork(subject) và hàm này có một tham số subject. Chúng ta gọi hàm doHomeWork() bằng cách nhập một tham số vào trong hàm doHomeWork() như sau:

doHomework('math');

kết quả sẽ trả về

Starting my math homework.

Bây giờ hãy thêm Callback vào hàm doHomeWork() . Giống như tham số đầu tiên trong hàm doHomeWork() chúng ta có thể gọi tham số trong hàm Callback. Hàm Callback được định nghĩa như một tham số thứ hai trong hàm doHomeWork() như sau:

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

doHomework('math', function() {
  alert('Finished my homework');
});

Bạn sẽ thấy nếu bạn viết đoạn code trên vào màn hinh bạn sẽ nhận được 2 thông báo. Đầu tiên sẽ là thông báo Starting my math homework sau đó là thông báo Finished my homework. Nhưng hàm callback không phải luôn luôn được xác định như một tham số trong hàm của chúng ta. Chúng có thể định nghĩa ở một hàm khác như sau:

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

Kết quả của đoạn code này cũng giống đoạn code ở ví dụ trên. Bạn có thể thấy chúng ta truyền hàm alertFinished() như một tham số vào hàm doHomework() trong lúc hàm doHomework() đang thực thi

Kết luận

Qua hai ví dụ đơn giản trên các bạn đã phần nào hiểu được callback là gì và chúng hoạt động như thế nào. Còn rất nhiều thứ hay ho về callback và mình sẽ chia sẻ ở những bài viết sau. Bài viết còn nhiều thiếu sót mong mọi người thông cảm. Cám ơn mọi người đã đọc bài viết của mình.