Tìm Hiểu Callback Function Trong Javascript

Posted on by adminChuyên mục:Kiến thức Internet

Callback function là một nội dung quan trong mà bạn cần nắm khi lập trình với javascript.. Hôm nay chúng ta hãy cùng nhau đi vào tìm hiểu về khái niệm cũng như cách sử dụng callback function trong ngôn ngữ lập trình Javascript để phát triển web nhé.

Theo định nghĩa từ MDN thì callback function là một hàm được truyền vào một hàm khác dưới dạng đối số, sau đó sẽ được gọi bên trong hàm chứa nó để thực hiện các công việc hay hành động nào đó. Nói một cách dễ hiểu hơn, callback function là một hàm được xảy ra sau khi một hàm khác đã được thực thi xong.

Tại Sao Chúng Ta Phải Cần CallBack Function?

Thông thường Javascript biểu thị sự đồng bộ trong :

 console.log("Thực Hiện Hành Động 1");
 console.log("Thực Hiện Hành Động 2");
 console.log("Thực Hiện Hành Động 3");

Với đoạn code trên thì Javascript sẽ thực thi đoạn mã từ trên xuống dưới. và tất cả chúng ta sẽ có được tác dụng như hình ảnh dưới đây :Ví dụ chạy lệnh trong js

Bây giờ chúng ta sử dụng hàm setTimeout() để thiết lập thời gian chạy của hành động 2 sẽ được thực thi sau 1s thì kết quả sẽ như thế nào nhé:

 console.log("Thực Hiện Hành Động 1");
 setTimeout(function() {
   console.log("Thực Hiện Hành Động 2");
 }, 1000);

 console.log("Thực Hiện Hành Động 3");

Nếu bạn muốn tham khảo thêm về hàm setTimeout() thì xem ở đây nhé. Bây giờ chúng ta kiểm tra kết quả của chương trình :

Chạy lệnh với setTimeout

Thông thường Javascript sẽ chạy từ trên xuống dưới nhưng trong trường hợp như ví dụ trên khi ta thiết lập setTimeout cho hành động 2 thì chương trình sẽ chạy hai hành động 1 và 3 sau đó mới thực thi hành động thứ 2. Đây được gọi là sự bất đồng bộ trong Javascript.

Ở đây mình xin giải thích một tý về sự bất đồng bộ. Như bạn đã biết thì Javascript là một ngôn ngữ lập trình đơn luồng (single-threaded) nghĩa là nó sẽ chỉ xử lý một hành động tại một thời điểm cụ thể. Do đó để nhằm hạn chế về vấn đề hiệu suất thì javascript xử lý sự kiện theo bất đồng bộ: nếu như thời gian chờ của một hành động nào đó quá dài thì nó sẽ chuyển sang thực thi hành động khác và sẽ gọi lại hành động đó sau. Điều này giúp giảm thiểu thời gian chờ của chương trình.

Mình muốn thông qua ví dụ trên để bạn có thể hiểu là thứ tự chạy hàm trong javascript nhiều khi sẽ không như chúng ta mong muốn và gây ra những lỗi ngoài mong muốn. Và callback function giúp chúng ta có thể chắc chắn một đoạn mã sẽ không được thực thi cho đến khi đoạn mã khác đã thực hiện xong.

Cách Sử Dụng Callback Function

Bây giờ chúng ta sẽ làm một ví dụ về callback function là xuất kết quả ra ngoài màn hình sau khi hàm tính tổng đã thực hiện xong.

Hàm xuất kết quả:
 function ketQua(giaTri) {
    console.log(giaTri);
 }

Sau đó chúng ta sẽ gán hàm ketQua (callback function) vào hàm tinhTong như một đối số để chắc chắn là sau khi hàm tính tổng chạy xong thì hàm kết quả mới được chạy:

Hàm Tính Tổng:
 function tinhTong(a, b, callback) {
   let giaTri = a + b;
   callback(giaTri);
 }

Bây giờ tất cả chúng ta sẽ đi vào phối hợp hai đoạn code trên để xem chương trình chạy thế nào nhé :

Đoạn Code:

 function ketQua(giaTri) {
    console.log(giaTri);
 }

 function tinhTong(a, b, callback) {
   let giaTri = a + b;
   callback(giaTri);
 }

 /*Gọi hàm kết quả như một tham số (callback)*/
 tinhTong(2, 3, ketQua);

Kết Quả:

Sử dụng callback function trong javascript

Ở đây mình xin giải thích một tý là trong hàm tinhTong đang được chúng ta truyền vào với 3 đối số. Với đối số thứ nhất (a) và thứ hai (b) là giá trị của hai số cần tính tổng. Và đối số thứ ba (callback) là một callback function.

Sau khi đoạn mã tính tổng được thực hiện xong (let giaTri = a + b) thì chúng ta sẽ gọi callback function mà bây giờ chính là hàm ketQua và gán giá trị mới tính được vào cho nó. Sau đó hàm ketQua sẽ thực hiện nhiệm vụ in kết quả tính tổng ra ngoài màn hình.

Vậy tại sao chúng ta có thể truyền một function (hàm) như một đối số vào trong một hàm khác ?
Bạn còn nhớ kiểu dữ liệu của function là một object. Do đó chúng ta có thể truyền các hàm như một đối số vào cho các hàm khác và các hàm cũng có thể được trả về từ các hàm khác. Những hàm đó thì được gọi là higher-order functions. Bạn có thể tham khảo thêm ở đây nhé.

Để bạn nắm rõ hơn thì chúng ta sẽ tiếp tục đi vào một ví dụ khác sử dụng callback function nhé:

Đoạn Code:

 function xinChao(hoTen) {
    console.log("Xin Chào Bạn " + hoTen);
 }

 function layTen(ho, ten, callback) {
   let hoTen = ho + ' ' + ten;
   callback(hoTen);
 }

 /*Gọi hàm xin chào như một tham số (callback)*/
 layTen("Đỗ", "Lan", xinChao);

Kết Quả:

Sử dụng callback function trong javascript phần 2

Callback Hell Javascript

Sau đây bạn xem một đoạn code dùng miêu tả về callback hell nhé:

 function layThongTin(ten) {
   diaChi(diaChi) {
     noiLamViec(noiLamViec) {
       soDienThoai(soDienThoai) {
         layEmail(layEmail) {
           console.log('Hoàn Tất lấy thông tin');
         };
       };
     };
   };
 }

Khi chúng ta quá lạm dụng các callback function để buộc các hàm bất động bộ phải chạy một cách tuần tự trong chương trình thì nó sẽ gây ra tình trạng khó quản lý code, sự khó hiểu cho những lập trình viên khác khi muốn sử dụng code của bạn. Do đó callback function chỉ phù hợp cho những hàm bất đồng bộ với số lượng ít.

Trong các phiên bản Javascript mới thì có cung cấp các tiện ích giúp giải quyết tình trạng callback hell là

  • Sử dụng async-await.
  • Sử dụng promises.

Phần này mình sẽ giới thiệu cho bạn ở bài kế tiếp nhé.

Tổng kết:

Phần này mình sẽ ra mắt cho bạn ở bài sau đó nhé .

Qua đây mình mong bài viết sẽ giúp bạn hiểu được khái niệm cũng như cách sử dụng callback function trong ngôn ngữ Javascript và nếu có thắc mắc gì cứ gửi email mình sẽ phản hồi sớm nhất có thể. Rất mong bạn tiếp tục ủng hộ trang web để mình có thể viết nhiều bài hay hơn nữa nhé. Chúc bạn có một ngày vui vẻ!

admin