Callback là gì

Họcvà 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.

Bạn đang xem: Callback là gì

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 đã đượcthự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ànhcác sự việc,vì vậy mỗi lần thực thithay vì chờ đợi phản hồi, Javascript vẫn sẽtiếp tục thực thi cáclệnh tiếp theo, đồng thời chờ đợi phản hồi từ các sự việckhá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// 2Tất cả đều tốt cho đến lúc bạn đặt ra câu hỏisẽ thế nào nếu function thứ nhấtchứ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ấtphả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:

first();second();// 2// 1Như 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.

Xem thêm: Challenging Là Gì – Nghĩa Của Từ Challenge Trong Tiếng Việt

Không phải là Javascript không thực hiện theo thứ tự mà ta mong muốn, vấn đề là Javascript sẽ không đợi function firstthực hiện xongmà sẽ thực hiện luôn function second. Để đảm bảo Js thực hiện đúng thứ tự ta định sẵn, ta cần sử dụng đến khái niệm callback function. Callback là cách đảm bảo codesẽ không hoạt độngtrước khi các code khác hoàn thành việc thực thi.
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.logcủa bạn:

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

Ở trên, chúng tađã tạo functiondoHomework(). Function của chúng ta có một biến, là đối tượng mà talàm việc trên đó. Gọi functioncủ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ãyadd thêmcallback vàonhư là một tham số của function. Callback sau đó được định nghĩa làđối số thứ hai bên tronglệnh gọi functiondoHomework () .

Tuy nhiên callback functions không phải lúc nào cũng phải được xác định bêntrong lệnh gọi Function . Chúng có thể được định nghĩa ở nơi khác trong codecủa chúng ta như sau:

Xem thêm: Năm 2017 Là Năm Gì – Sinh Con Năm 2017 đinh Dậu Tháng Nào Tốt

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 khicó thể thực hiện công việctiế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.getcó nghĩa đơn giảnlà 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 APIyê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ồitrả 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ầucó 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ặpgặp phải. Mong rằng nó sẽ giúp cácbạn có thể hiểu được callbacklà 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”

Chuyên mục: Hỏi Đáp