Callback-in-javascript.png

Callback trong JavaScript

Callback là một khái niệm không mới gặp ở nhiều ngôn ngữ lập trình, và tất nhiên trong JS cũng có callback. Nếu bạn đã biết về C++, C#, … thì có thể hiện thực callback bằng con trỏ hàm, còn trong JS thì đơn giản hơn, vì đa số thứ trong JS đều là object nên bạn chỉ cần quăng nguyên cái function vào là ok, không cần phải trỏ lung tung như kia, đơn giản vậy nhưng callback trong JS cũng nhây bome ra, đừng đùa. Mập mờ vậy đủ rồi, vào chủ đề chính nào.

Callback là gì?

Callback được hiểu là một đoạn code được truyền vào cho một hàm như là một tham số, tới một thời điểm nào đó thì đoạn code này sẽ được lôi ra để thực thi.

Nhìn đoạn code sau

ở đây hàm funcB() được mô phỏng là xử lý dữ liệu, còn funcA() đóng vai trò load dữ liệu lên. Ta truyền hàm funcB vào cho funcA, khi funcA thực hiện việc load xong dữ liệu thì dùng funcB để xử lý. Ta giả sử funcA cần 2s để thực hiện xong việc load dữ liệu rồi funcB() mới thực hiện việc xử lý dữ liệu. Nhìn tiếp vào đoạn code sau

Chức năng i chang đoạn code 1 nhưng không sử dụng callback function cho việc load và xử lý dữ liệu, ở đây thì funcA() cũng cần 2s để load dữ liệu, thế nhưng thằng funcB nó chạy luôn mà không thèm chờ thằng funcA thực hiện xong việc load dữ liệu, rõ ràng việc này nó sida.

Callback được sử dụng cực kì nhiều trong javascript, đặc biệt khi bạn chơi với jQuery thì gặp callback như cơm :v. Người ta thường sử dụng callback để hiện thực mấy cái hàm load rồi xử lý dữ liệu, hay download rồi xử lý, …. đại loại là những công việc có mang tính chất thằng trước phải xong cái đã rồi thằng sau chạy, tránh các trường hợp thằng trước chạy chưa xong thì thằng sau nôn quá cũng chạy như trường hợp trên thì dẫn đến sida cả đám. Vấn đề về sự thực thi các thể loại như trên liên quan đến tính đồng bộ (synchonous) và bất đồng bộ (asynchonous) của javascript mà mình sẽ nói ở bài viết ở bài viết khác. Bạn cứ nắm tinh thần là callback được sử dụng để giải quyết mấy vấn đề này.

Sử dụng callback khá hay ho và tiện lợi, nhưng viết code sử dụng callback không trong sáng thì sẽ lòi ra cái thứ sau đây còn sida hơn nữa.

Callback hell

Bạn hẳn đã thấy hình ảnh này đâu đó quanh đây :v

 callback-hell

Giả sử ta làm task_1, task_2, task_3, task_4, task_5 theo thứ tự và xong thằng này thì mới đến thằng tiếp theo => sử dụng callback sẽ như sau :v

Nhìn đoạn code ngầu ghê :v. Bạn có thể code kiểu này khi có bạn gái đứng sau lưng để tăng vẻ đẹp trai nhưng vài hôm sau sẽ ngồi debug sml, hoặc thằng maintain code của bạn sẽ cầm dao tới nhà chơi với bạn đấy :v.

callback-hell

Bây giờ code như nào đây? – Đơn giản nhất, giữ code thông thoáng sạch sẽ trong sáng đẹp đẽ là được, cách này tuy làm code dài nhưng dễ làm hơn cả.

ES6 có promise, thứ này dùng để giải quyết callback hell hiệu quả lắm nhưng không cẩn thận thì ……………….

callback-hell-so-i-thought-to-use-promises-now-i-have-promise-hell


Chúc các bạn code vui vẻ !!

Leave a Reply

Your email address will not be published. Required fields are marked *