callback-service

Callback trong javascript

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.

why1

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:


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).


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.

pr-2

Advertisements

8 thoughts on “Callback trong javascript”

  1. E làm bên web, a ráng viết nhiều nhiều bài về javascript và jquery và lodash anh ơi. Cái cảm giác code chạy rồi mà k hiểu bản chất sau debug đuối đơ thiệt bực bội a ạ ^^

    Like

    1. Cảm ơn góp ý của bạn, trên blog mình cũng có viết 1 bài về lodash. Nắm vững khái niệm callback trong js, bạn sẽ hiểu rõ hơn cách vận hành của jQuery, lodash và các thư viện khác nhé 😀

      Like

  2. Em có thắc mắc xíu là:
    Trong function oNha tại sao mình lại phải truyền function tangQua để làm gì vậy?(vì truyền vào mới sinh ra chuyện delegate)
    Tại sao ở dưới mình không chỉ việc gọi nó và truyền tham số vào thôi mà phải truyền cả nó vào?

    Like

    1. Đôi khi ta muốn oNha chạy như bình thường, nhưng nó không gọi function tangQua mà tangBanh, tangGiay, v…v, lúc đó ra có thể truyền hàm tangBanh, tangGiay vào function oNha.
      Trong trường hợp javascript, có nhiều khi function oNha đã được thư viện viết sẵn, ta không thể mở code trong thư viện ra để gọi function tangQua của mình được. Thư viện cho phép ta truyền 1 function vào, rồi sẽ gọi như trong bài viết.

      Like

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s