Trong bài viết này, ta sẽ cùng tìm hiểu về các hàm Callback trong JavaScript cùng với sự trợ giúp của các ví dụ dẫn chứng.

Hàm Callback trong JavaScript

Hàm là một khối đoạn mã thực hiện một tác vụ nào đó khi được gọi. Khi ta định nghĩa cho một hàm nào đó, ta có thể sử dụng lại nó trong các lần sau.

Ví dụ:

Kết quả:

Trong chương trình trên, một giá trị chuỗi ký tự được truyền làm đối số cho hàm vi_du().

Trong JavaScript, ta cũng có thể truyền một hàm làm đối số cho một hàm khác. Hàm được truyền như một đối số bên trong một hàm khác được gọi là hàm Callback.

Ví dụ:

Kết quả:

Trong chương trình trên, có hai hàm được định nghĩa. Trong khi gọi hàm vi_du(), có một đối số là một hàm vi_du2 được truyền. Hàm vi_du2() này chính là một hàm Callback.

Lợi ích của việc sử dụng hàm Callback

Lợi ích của việc sử dụng hàm Callback là ta có thể đợi kết quả của một lệnh gọi hàm trước đó và sau đó thực hiện một lệnh gọi hàm khác.

Trong ví dụ bên dưới đây, chúng ta sẽ sử dụng phương thức setTimeout() để minh họa về việc truyền một hàm bất kỳ (hàm do người dùng tự định nghĩa) làm đối số cho một hàm khác (Chính là hàm setTimeout()).

Ví dụ:

Kết quả:

Như đã biết, phương thức setTimeout() sẽ thực thi một khối đoạn mã sau thời gian được chỉ định. Ở đây, hàm vi_du() được gọi sau 1000 mili giây (tương đương với 1 giây). Trong khoảng thời gian này, hàm vi_du2() sẽ được thực thi trước. Đó là lý do tại sao chuỗi ký tự ‘JavaScript’ được in trước chuỗi ký tự ‘Lập trình JavaScript’.

Tuy nhiên, ta có thể thấy rằng đoạn mã trên được thực thi một cách không đồng bộ, hàm thứ hai được thực hiện trước so với hàm thứ nhất.

Ví dụ: Sử dụng hàm Callback.

Trong ví dụ trên, hàm thứ hai không đợi hàm đầu tiên hoàn thành. Tuy nhiên, nếu ta muốn đợi kết quả của lệnh gọi hàm trước đó trước khi câu lệnh tiếp theo được thực thi, ta có thể sử dụng hàm Callback.

Ví dụ:

Kết quả:

Trong chương trình trên, đoạn mã đã được thực thi một cách đồng bộ. Hàm vi_du2() được truyền làm đối số cho hàm vi_du(). Phương thức setTimeout() sẽ thực thi hàm vi_du() sau một khoảng thời gian là 1000 mili giây, tương đương với 1 giây. Tuy nhiên, hàm vi_du2() sẽ chờ việc thực thi hàm vi_du() hoàn thành.

Chú ý: Hàm Callback sẽ rất hữu ích khi ta phải đợi một kết quả nào đó trong một khoảng thời gian nhất định.

Trên đây là khái niệm và ví dụ cơ bản về hàm Callback trong JavaScript. Hy vọng mọi người có thể áp dụng vào trong chương trình của mình. Mọi người hãy tiếp tục theo dõi các bài tiếp theo và cập nhật các bài tiếp theo về lập trình JavaScript trên tek4 nhé!

P/s: Cảm ơn mọi người đã tin tưởng tek4!