Callback trong javascript

Posted on 05/02/2015 by Phạm Huy Hoàng

Callback là một khái niệm không mới. Tuy nhiên, nó là một trong những khái niệm khá lằng ngoằng và dễ nhầm lẫn trong lập trình. Với 1 số bạn có basic về C++, Java hay C#, ta thường biết đến callback qua khái niệm delegate (con trỏ hàm).
Bài viết đầu tiên, mình xin giới thiệu callback trong javascript. Lý do chọn javascript là vì Callback trong javascript là đơn giản, dễ hiểu nhất. Bài viết nhắm tới đối tượng là các bạn beginner nên mình sẽ cố gắng viết đơn giản nhất có thể.

1. Khái niệm về callback
Đầu tiên, xin nhắc lại đôi chút về khá niệm callback:

A callback is a piece of executable code that is passed as 
an argument to other code, which is expected to call back
(execute) the argument at some convenient time.

Nói một cách dễ hiểu, callback tức là ta truyền một đoạn code (Hàm A) này vào một đoạn code khác (Hàm B). Tới một thời điểm nào đó, Hàm A sẽ được hàm B gọi lại (callback).
Tới đây các bạn vẫn chưa hiểu? Ok, ngày xưa khi nghe các giáo viên dạy cái này mình cũng ko hiểu gì cả =))). Mình xin đưa ra 1 ví dụ đơn giản dễ hiểu ở phần dưới.

2. Ví dụ của callback. Ứng dụng trong jQuery
Bạn có việc phải đi công tác xa nhà.  Bạn dặn vợ, trong thời gian bạn đi, nếu như có ai giao quà tới, hãy đem qua tặng em gái dễ thương hàng xóm. Hàm A ở đây là việc tặng quà cho em hàng xóm:

1 2 3

function tangQua(qua) {    return console.log("Đã tặng " + qua);   }

Hàm B ở đây là việc vợ bạn ở nhà. Ta truyền hàm A vào như 1 argument cho hàm B, tại 1 thời điểm nào đó, hàm B sẽ gọi hàm A (Tức là vợ bạn mang quà qua cho em hàng xóm).

1 2 3 4

function oNha(vo, tangQua) {    var qua = "Quà đã nhận";    tangQua(qua);   }

Như các bạn thấy, hàm A được truyền vào như 1 argument. Các bạn biết jQuery có thể sử dụng rất nhiều callback mà ko biết. Hãy xét ví dụ dưới đây, ta hiển thị 1 pop-up khi click vào 1 button. Bài viết trước nói về fiddle nên lần này mình sẽ đưa link fiddle làm ví dụ:
http://jsbin.com/potivubifi/1/watch?html,js,output
Ở đây, function showPopup chính là hàm A, còn $(‘#btn’).click() là hàm B. Hàm B sẽ gọi hàm A khi ta click vào nút. Các bạn viết jQuery thường dùng cách ở dưới, nhưng không hiểu bản chất của việc mình đang làm.
3. Ứng dụng của callback
Như mình đã nói, Javascript là một ngôn ngữ khá thích hợp để giới thiệu callback. Ta có thể truyền thẳng 1 function vào 1 function khác, vì trong javascript 1 function được xem như 1 đối tượng (object). Trong các ngôn ngữ khác như C#, ta phải dùng delegate để truyền 1 function vào function khác (Nhớ kĩ câu này, mình sẽ nói rõ hơn ở bài sau).
Một số bạn sẽ hỏi: Callback mình code có xài mấy đâu? Thật ra trong quá trình code bạn có sử dụng callback mà không biết đấy (VD như code jQuery, hoặc gọi hàm khi user click vào 1 button trong WinForm, ASP.NET).
Callback có khá nhiều ứng dụng như sau:

• Gọi 1 hàm khi có 1 số sự kiện xảy ra. VD như khi click vào 1 nút ta gọi hàm A, khi tắt cửa sổ ta gọi hàm B, v…v.
• LINQ được xây dựng dựa trên khái niệm callback và lambda expression. Với callback, ta có thể thực hiện các thao tác như: Tìm 1 phần tử trong mảng, lọc phần tử trong mảng, sắp xếp mảng, … trở nên vô cùng đơn giản và thuận tiện. Các bạn có thể xem thêm tại bài viết Series C# hay ho: LINQ .
• …..

5 phút quảng cáo cho bộ phim (series bài viết) sắp tới. Hẹn gặp lại các bạn.

Về quảng cáo