Call back trong JavaScript

"I will call back later!"

Lại vứt (callback) là hàm được truyền làm tham số cho một hàm khác

Kỹ thuật này cho phép hàm gọi lại hàm khác

Hàm lại vứt có thể chạy sau khi hàm khác hoàn thành

Thứ tự hàm

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

Ví dụ này cuối cùng sẽ hiển thị "Goodbye":

mẫu

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

Thử ngay

Ví dụ này cuối cùng sẽ hiển thị "Hello":

mẫu

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

Thử ngay

Kiểm soát thứ tự

Đôi khi bạn muốn kiểm soát tốt hơn thời điểm thực hiện hàm.

Giả sử bạn cần tính toán và hiển thị kết quả.

Bạn có thể gọi lại hàm tính toán (myCalculator) và lưu kết quả, sau đó gọi lại hàm khác (myDisplayer) để hiển thị kết quả:

mẫu

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);

Thử ngay

hoặc, bạn có thể gọi lại hàm tính toán (myCalculator)，và để hàm tính toán gọi lại hàm hiển thị (myDisplayer)：

mẫu

function myDisplayer(some) {
  document.getElementById("demo").innerHTML = some;
}
function myCalculator(num1, num2) {
  let sum = num1 + num2;
  myDisplayer(sum);
}
myCalculator(5, 5);

Thử ngay

Vấn đề của ví dụ đầu tiên là bạn phải gọi hai hàm để hiển thị kết quả.

Vấn đề của ví dụ thứ hai là bạn không thể ngăn chặn hàm tính toán hiển thị kết quả.

Bây giờ là lúc chúng ta cần giới thiệu lại vứt.

Call back trong JavaScript

Lại vứt là hàm được truyền làm tham số cho một hàm khác.

Sử dụng lại vứt, bạn có thể gọi lại hàm tính toán qua lại vứt (myCalculator），và sau khi tính toán xong, để hàm tính toán chạy lại vứt:

mẫu

function myDisplayer(some) {
  document.getElementById("demo").innerHTML = some;
}
function myCalculator(num1, num2, myCallback) {
  let sum = num1 + num2;
  myCallback(sum);
}
myCalculator(5, 5, myDisplayer);

Thử ngay

Trong ví dụ trên, myDisplayer là tên hàm.

Nó được truyền làm tham số cho myCalculator().

Khi bạn truyền hàm làm tham số, hãy nhớ không sử dụng dấu ngoặc.

Đúng: myCalculator(5, 5, myDisplayer);

Lỗi: myCalculator(5, 5, myDisplayer());

Khi nào sử dụng callback?

Ví dụ trên không thực sự thú vị.

Họ đã được đơn giản hóa để giải thích cú pháp của callback.

Điểm sáng thực sự của callback là hàm đồng bộ, trong đó một hàm phải chờ hàm khác (ví dụ chờ tải tệp).

Chương tiếp theo sẽ giới thiệu về hàm đồng bộ.