HOME › học javascript - lập trình javascript cơ bản>>08. hàm trong javascript

Callback trong JavaScript

8 tháng 7 ,2021

Cùng tìm hiểu về callback trong JavaScript. Bạn sẽ học được khái niệm callback trong JavaScript là gì, mối quan hệ giữa callback và higher order function, cũng như cách sử dụng call back trong các xử lý bất đồng bộ trong JavaScript như lắng nghe sự kiện và hẹn giờ thực hiện chức năng sau bài học này.

Callback trong JavaScript

Callback trong JavaScript có tên đầy đủ là callback function, là một hàm được truyền vào hàm khác dưới dạng một đối số. Hàm callback sẽ được gọi từ bên trong một hàm khác, và chúng ta gọi hàm nhận hàm callback dưới dạng đối số là hàm bậc cao hơn(higher-order function).

Mối quan hệ giữa hai hàm này tương tự như mối quan hệ cha con vậy.

Trong JavaScript thì hàm (function) cũng là một loại đối tượng (object), và đó là lý do vì sao chúng ta có thể truyền hàm callback dưới dạng đối số cho một hàm khác.

Xem thêm: Function object trong JavaScript

Lại nữa, callback vốn có nghĩa là gọi lại trong tiếng Việt. Và chính xác như nghĩa của nó thì Callback function sẽ được truyền vào trong hàm higher-order function, để rồi sau đó sẽ được hàm higher-order function gọi lại tại một thời điểm nào đó trong chương trình.

Tạo hàm callback trong JavaScript bằng từ khoá function

Chúng ta sử dụng từ khoá function để tạo hàm trong JavaScript. Thông thường thì chúng ta sẽ tạo một hàm, đặt tên và gọi nó tại nhiều thời điểm trong chương trình. Ví dụ chúng ta tạo một hàm in tên hàng cộng giá tiền, và gọi nó trực tiếp như sau:

function check_price(name,price){
  console.log('Giá', name,':', price );
}

check_price('tomato', 120)//> Giá tomato : 120

Xem thêm: Function trong JavaScript với cách tạo và gọi hàm

Tuy nhiên nếu chúng ta không gọi hàm trên trực tiếp mà sử dụng nó như là một đối số trong một hàm khác, thì khi đó nó sẽ trở thành một callback function trong JavaScript.

Ví dụ cụ thể, chúng ta truyền callback function này dưới dạng đối số trong một hàm khác như sau:

//Tạo hàm callback
function check_price(name,price){
  console.log('Giá ', name,':', price );
}

//Truyền hàm callback trên dưới dạng đối số vào một hàm higher-order function
function tomato(check_price){
  const name = "cà chua";
  const price = 100;
  check_price(name, price);
}

//Chạy hàm higher-order function để gọi lại hàm callback
tomato( check_price);
//> Giá  cà chua : 100

Trong ví dụ trên, sau khi chúng ta gọi hàm tomato() thì hàm tomato() sẽ gọi lại hàm check_price(), qua đó thực thi hàm check_price() bên trong hàm tomato().

Sau khi tạo ra hàm callback trong JavaScript, chúng ta có thể sử dụng nó nhiều lần trong các hàm khác nhau. Ví dụ, ngoài việc gọi hàm callback check_price() trong hàm tomato() thì chúng ta có thể gọi nó trong các hàm khác như hàm orange() chẳng hạn:

function orange(orgin_price,tax,check_price){
  const name = "cam";
  let price = orgin_price * (1+ tax/100)
  check_price(name, price);
}

orange(500,20, check_price);
//> Giá  cam : 600

Tạo hàm callback trong JavaScript bằng hàm ẩn danh

Chúng ta cũng có thể khai báo hàm callback trong JavaScript bằng một hàm ẩn danh (Anonymous Function). Với hàm ẩn danh thì do nó không có tên, nên để có thể gọi nó nhiều lần trong các hàm khác nhau thì chúng ta cần phải gán nó vào một biến như sau:

//Tạo hàm callback và gán vào một biến
let helloworld = function (){
  alert("Hello world!");
}

Xem thêm: Hàm ẩn danh (Anonymous Function) trong JavaScript

Sau khi đã tạo hàm ẩn danh, chúng ta có thể sử dụng nó như một hàm callback, bằng cách gọi nó trong các hàm khác. Ví dụ, chúng ta gọi gọi hàm helloword() ở trên mỗi khi click vào một nút trên trình duyệt như sau:

<button onclick="helloworld()">Click me</button>

Khi đó, mỗi khi click vào nút thì hàm callback sẽ được gọi, và dòng Hello world! sẽ được in ra màn hình.

Lại nữa, do tính chất của hàm ẩn danh có thể được viết trực tiếp dưới dạng một đối số của hàm khác, nên chúng ta cũng có thể viết trực tiếp một hàm callback như là đối số khi gọi hàm higher-order.

Ví dụ, chúng ta viết một hàm call back có tác dụng thay đổi giá hàng theo thuế được khai như là một đối số trong hàm khác như sau:

//Tạo hàm higher-order function
function orange(orgin_price,tax,func){
  const name = "cam";
  func(name, orgin_price * (1+ tax/100));
}

//Chạy hàm higher-order function và ghi trực tiếp hàm callback trong đối số
orange(500,20, function (name,price){
  console.log('Giá ', name,':', price );
});
//> Giá  cam : 600

Ngoài cách viết trên, chúng ta cũng có thể sử dụng hàm mũi tên arrow để viết gọn hàm ẩn danh như sau:

function orange(orgin_price,tax,func){
  const name = "cam";
  func(name, orgin_price * (1+ tax/100));
}
orange(500,20,  (name,price) => {
  console.log('Giá ', name,':', price );
});
//> Giá  cam : 600

Xem thêm: Arrow function trong JavaScript và cách tạo hàm

Sử dụng callback trong JavaScript

Hàm callback thường được sử dụng trong các xử lý bất đồng bộ trong JavaScript. Điều đó có nghĩa là chúng ta sẽ dùng hàm callback trong trường hợp muốn các xử lý trong hàm higher-order function chứa hàm callback phải kết thúc trước khi hàm callback được thực thi.

Các ứng dụng hay được sử dụng nhất của hàm callback đó là lắng nghe sự kiện như người dùng (Event Listeners), ví dụ như bắt sự kiện click button chẳng hạn, và hẹn giờ thực hiện chức năng trong JavaScript.

Sử dụng callback để lắng nghe sự kiện như người dùng

Trong JavaScript, các sự kiện người dùng có thể tạo ra như click chuột, bấm phím, click button đều có thể dễ dàng được lắng nghe. Và JavaScript cũng cho phép chúng ta tạo ra các hàm nhằm xử lý sau khi bắt được sự kiện của người dùng.

Do thích hợp với các xử lý bất đồng bộ nên hàm callback được sử dụng phổ biến trong các hàm xử lý kiểu này. Có nghĩa là chỉ sau khi sự kiện phát sinh, hàm xử lý sự kiện phát hiện ra sự kiện đó, thì hàm callback lúc này mới được gọi mà thôi.

Ví dụ, chúng ta thường thấy lệnh bắt sự kiện click và hàm callback trong JavaScript như sau:

let callback_fuc = () => { console.log('button clicked!')}

document.getElementById("button").onclick = function() {
  //Gọi hàm callback sau khi nút được click
  callback_fuc();
};

//> button clicked!

Sử dụng hàm callback để hẹn giờ thực hiện chức năng trong JavaScript

Để hẹn giờ thực hiện chức năng trong JavaScript, chúng ta sử dụng hàm callback kèm phương thức setTimeout() với cú pháp sau:

setTimeout(callback_func, time);

Phương thức setTimeout() trong JavaScript sẽ chờ một khoảng thời gian bằng số giây chỉ định trong tham số time, và sau khi hết thời gian mới thực thi hàm callback_func().

Một ví dụ đơn giản sử dụng hàm callback để hẹn giờ thực hiện chức năng trong JavaScript, chúng ta sẽ in ra màn hình dòng chữ ‘Hello’, chờ 3s và sau đó in dòng chữ ‘Bye’ ra mình hình như sau:

console.log('Hello');

setTimeout(function(){
  console.log('Bye');
},3000);

Mặc dù chỉ là ví dụ đơn giản thôi, nhưng bạn cũng có thể nhận ra bằng cách sử dụng hàm callback, chúng ta có thể dễ dàng hoàn thành các xử lý bất đồng bộ trong JavaScript rồi phải không nào?

Tổng kết

Trên đây Kiyoshi đã hướng dẫn bạn về cách sử dụng callback trong JavaScript rồi. Để nắm rõ nội dung bài học hơn, bạn hãy thực hành viết lại các ví dụ của ngày hôm nay nhé.

Và hãy cùng tìm hiểu những kiến thức sâu hơn về JavaScript trong các bài học tiếp theo.