[Javascript] – Phần 66: Callbacks trong JavaScript

Callback là gì?

Callback là một hàm được truyền như một đối số cho một hàm khác. Kỹ thuật này cho phép hàm đó gọi một hàm khác. Hàm callback có thể chạy sau khi hàm khác hoàn thành.

Thứ tự thực thi hàm

Các hàm JavaScript được thực thi theo thứ tự chúng được gọi, không phải theo thứ tự chúng được định nghĩa.

Ví dụ:

function myFirst() {
  myDisplayer("Hello");
}

function mySecond() {
  myDisplayer("Goodbye");
}

myFirst(); // Hello
mySecond(); // Goodbye

Kiểm soát thứ tự thực thi

Trong một số trường hợp, bạn muốn kiểm soát tốt hơn thời gian thực thi một hàm.

Ví dụ:

Bạn muốn thực hiện một phép tính và sau đó hiển thị kết quả. Bạn có thể gọi một hàm tính toán (myCalculator), lưu kết quả và sau đó gọi một hàm khác (myDisplayer) để hiển thị kết quả.

function myDisplayer(some) {
  document.getElementById("demo").innerHTML = some;
}

function myCalculator(num1, num2) {
  let sum = num1 + num2;
  return sum;
}

let result = myCalculator(5, 5);
myDisplayer(result); // 10

Hoặc:

Bạn có thể gọi hàm tính toán (myCalculator) và để hàm tính toán gọi hàm hiển thị (myDisplayer).

function myDisplayer(some) {
  document.getElementById("demo").innerHTML = some;
}

function myCalculator(num1, num2) {
  let sum = num1 + num2;
  myDisplayer(sum);
}

myCalculator(5, 5); // 10

Vấn đề:

• Cách 1: Bạn phải gọi hai hàm để hiển thị kết quả.
• Cách 2: Bạn không thể ngăn hàm tính toán hiển thị kết quả.

Callback giải quyết vấn đề:

Callback là một hàm được truyền như một đối số cho hàm khác.

Sử dụng callback:

function myDisplayer(some) {
  document.getElementById("demo").innerHTML = some;
}

function myCalculator(num1, num2, myCallback) {
  let sum = num1 + num2;
  myCallback(sum);
}

myCalculator(5, 5, myDisplayer); // 10

Trong ví dụ trên:

• myDisplayer là hàm callback.
• Nó được truyền cho myCalculator như một đối số.

Lưu ý:

• Khi truyền một hàm như một đối số, đừng sử dụng dấu ngoặc đơn.
• Đúng: myCalculator(5, 5, myDisplayer);
• Sai: myCalculator(5, 5, myDisplayer());

Ví dụ khác:

// Mảng số
const myNumbers = [4, 1, -20, -7, 5, 9, -6];

// Lọc số âm
const posNumbers = removeNeg(myNumbers, number => number >= 0);

// Hiển thị kết quả
document.getElementById("demo").innerHTML = posNumbers; // 4, 1, 5, 9

// Giữ lại số dương
function removeNeg(numbers, callback) {
  const myArray = [];
  for (const number of numbers) {
    if (callback(number)) {
      myArray.push(number);
    }
  }
  return myArray;
}

Trong ví dụ trên:

• number => number >= 0 là hàm callback.
• Nó được truyền cho removeNeg như một đối số.

Khi nào sử dụng callback?

• Callback thực sự hữu ích trong các hàm bất đồng bộ, nơi một hàm phải chờ một hàm khác (ví dụ: chờ tải tệp).
• Chương tiếp theo sẽ giới thiệu về các hàm bất đồng bộ.