Học và tìm hiểu khái niệm cơ bản về callback chỉ trong 6 phút với những ví dụ cơ bản.

Lời nói đầu

Chào! Tôi là Brandon. Tôi là người đã tạo ra codeburst.io và viết các bài hướng dẫn JavaScript để giúp các bạn mới bắt đầu hiểu rõ hơn về cách hoạt động của cộng việc Phát triển Web. Nếu bạn có bất kỳ câu hỏi nào về bài viết, hãy để lại nhận xét và tôi sẽ liên hệ lại với bạn hoặc liên lạc với tôi qua twitter @brandonmorelli. Cuối cùng, khi bạn đã sẵn sàng để thực sự tìm hiểu sâu về Phát triển web, hãy xem các khóa học tốt nhất để học tập phát triển web một cách bài bản nhất.

Call back là gì

Nói một cách đơn giản: Gọi lại là một function sẽ được thực thi sau khi một function khác đã được thực thi xong - do đó nó có tên là callback(gọi lại).

Nói một cách phức tạp hơn : Trong Javascript, functions là objects,do đó nó có thể nhận tham số là function, và cũng có thể trả về một function. Vì vậy bất cứ function nào được truyền vào như một tham số và được gọi sau đó sẽ có tên là callback function.

Đó có vẻ rất nhiều từ, vậy hãy xem xét một số ví dụ để giải thích điều này một chút.

Tại sao lại cần callbacks

Lý do rất quan trọng là bởi vì Javascript là một ngôn ngữ điều hành các sự việc,vì vậy mỗi lần thực thi thay vì chờ đợi phản hồi, Javascript vẫn sẽ tiếp tục thực thi các lệnh tiếp theo, đồng thời chờ đợi phản hồi từ các sự việc khác. Xem xét ví dụ sau:

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

Đúng như bạn mong muốn,function đầu tiên được thực thi đầu tiên, và function thứ hai được thực thi thứ hai. màn hình console của trình duyệt in ra kết quả là:

// 1
// 2

Tất cả đều tốt cho đến lúc bạn đặt ra câu hỏi sẽ thế nào nếu function thứ nhất chứa đoạn code mà không thể thực thi ngay tại thời điểm được gọi, ví dụ như function thứ nhất phải thực hiện API call và mất một khoảng thời gian mới nhận được kết quả phản hồi ? Để mô phỏng hành động này, ở đây tôi sẽ sử dụng setTimeout và để delay 500 mili giây. Đoạn code mới sẽ trông như sau:

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

Hiện tại quan trọng là bạn không cần quan tâm cách hàm setTimeout () hoạt động như thế nào . Hãy chú trọng đến việc chúng tôi đã thêm vào bên trong console.log (1); độ trễ 500 mili giây . Vậy điều gì sẽ xảy ra khi chúng ta gọi các hàm của mình?

first();
second();

// 2
// 1

Như các bạn thấy, mặc dù chúng ta gọi hàm first trước nhưng nó lại trả về kết quả sau hàm second.

Tạo một CallBack

Việc đầu tiên hãy mở Chrome Developer Console trong máy bạn ra. (Windows: Ctrl + Shift + J)(Mac: Cmd + Option + J), và nhập khai báo hàm sau vào Console.log của bạn:

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

Ở trên, chúng ta đã tạo function doHomework(). Function của chúng ta có một biến, là đối tượng mà ta làm việc trên đó. Gọi function của bạn bằng cách nhập thông tin sau vào console.log :

doHomework('math');

// Alerts: Starting my math homework.

Giờ chúng ta hãy add thêm callback vào như là một tham số của function . Callback sau đó được định nghĩa là đối số thứ hai bên trong lệnh gọi function doHomework () .

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

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

Như bạn sẽ thấy, nếu bạn nhập code ở trên vào console.log, bạn sẽ nhận lại hai cảnh báo: cái đầu tiên là "Starting my math Homework" , tiếp theo là ‘Finished my homework’ . 

Tuy nhiên callback functions không phải lúc nào cũng phải được xác định bên trong lệnh gọi Function . Chúng có thể được định nghĩa ở nơi khác trong code 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ả hoàn toàn giống nhau, nhưng về thiết lập có một chút khác biệt. Như bạn thấy, chúng ta đã chuyển định nghĩa thông báo chức năng alertFinished làm đối số bên trong lệnh gọi Function doHomework () .

Ví dụ trong thực tế

Tuần trước, tôi đã xuất bản một bài viết về cách tạo một Bot Twitter trong 38 dòng code. Lý do duy nhất code trong bài viết đó hoạt động là do Twitters API. Khi bạn yêu cầu một API, bạn phải đợi phản hồi trước khi có thể thực hiện công việc tiếp theo . Đây là một ví dụ tuyệt vời về callback trong thực tế. Sau đây là yêu cầu:

T.get('search/tweets', params, function(err, data, response) {
  if(!err){
    // This is where the magic will happen
  } else {
    console.log(err);
  }
})

• T.get có nghĩa đơn giản là chúng ta đang thực hiện một yêu cầu nhận được tới Twitter.
• Yêu cầu này có tất cả 3 tham số  : "search/tweets" là đường dẫn đến với yêu cầu, "params" là các param được API yêu cầu, và một anonymous function đóng vai trò callback.

Callback quan trọng ở đây là vì khi thực hiện API request, ta không chắc rằng có phản hồi trả về hay không, vì vậy callback ở đây sẽ giúp chúng ta đảm bảo rằng chỉ khi request thành công, ta mới thực hiện các công việc tiếp theo.Trong function callback , chúng ta có thể sử dụng câu lệnh if () để xác định xem yêu cầu có thành công hay không, và sau đó hành động dựa trên dữ liệu mới cho phù hợp.

Kết bài

Trên đây là kiến thức cơ bản về callback mà những người làm việc với Js hay gặp gặp phải. Mong rằng nó sẽ giúp các bạn có thể hiểu được callback là gì và nó hoạt động như thế nào. Tuy nhiên nó vẫn chỉ là chút đỉnh của cả một tảng băng trôi về callback, còn rất nhiều cái để bạn suy nghĩ và tìm hiểu. Chúc các bạn thành công và may mắn!

Bài viết được dịch từ bài: "JavaScript: What the heck is a Callback?" của tác giả :"Brandon Morelli"