Gọi lại JavaScript
"Tôi sẽ gọi lại sau!"
Gọi lại là một hàm được truyền dưới dạng đối số cho một hàm khác
Kỹ thuật này cho phép một hàm gọi một hàm khác
Một hàm gọi lại có thể chạy sau khi một hàm khác kết thúc
Trình tự hàm
Các hàm JavaScript được thực thi theo trình tự mà chúng được gọi. Không theo trình tự mà chúng được xác định.
Ví dụ này sẽ kết thúc hiển thị "Tạm biệt":
Thí dụ
function myFirst() {
myDisplayer("Hello");
}
function
mySecond() {
myDisplayer("Goodbye");
}
myFirst();
mySecond();
Ví dụ này sẽ kết thúc hiển thị "Xin chào":
Thí dụ
function myFirst() {
myDisplayer("Hello");
}
function
mySecond() {
myDisplayer("Goodbye");
}
mySecond();
myFirst();
Kiểm soát trình tự
Đôi khi bạn muốn kiểm soát tốt hơn thời điểm thực thi một hàm.
Giả sử 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 máy tính ( myCalculator), lưu kết quả, rồi gọi một hàm khác ( myDisplayer) để hiển thị kết quả:
Thí dụ
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);
Hoặc, bạn có thể gọi một hàm máy tính ( myCalculator) và để hàm máy tính gọi hàm hiển thị ( myDisplayer):
Thí dụ
function myDisplayer(some) {
document.getElementById("demo").innerHTML
= some;
}
function myCalculator(num1, num2) {
let sum = num1 + num2;
myDisplayer(sum);
}
myCalculator(5, 5);
Vấn đề với ví dụ đầu tiên ở trên, là bạn phải gọi hai hàm để hiển thị kết quả.
Vấn đề với ví dụ thứ hai là bạn không thể ngăn chức năng máy tính hiển thị kết quả.
Bây giờ là lúc để gọi lại.
Gọi lại JavaScript
Gọi lại là một hàm được truyền như một đối số cho một hàm khác.
Sử dụng một lệnh gọi lại, bạn có thể gọi hàm máy tính ( myCalculator) với một lệnh gọi lại và để hàm máy tính chạy lệnh gọi lại sau khi kết thúc tính toán:
Thí dụ
function myDisplayer(some) {
document.getElementById("demo").innerHTML
= some;
}
function myCalculator(num1, num2, myCallback) {
let sum = num1 + num2;
myCallback(sum);
}
myCalculator(5, 5, myDisplayer);
Trong ví dụ trên, myDisplayerlà tên của một hàm.
Nó được chuyển đến myCalculator()như một đối số.
Khi bạn truyền một hàm làm đối số, hãy nhớ không sử dụng dấu ngoặc đơn.
Phải: myCalculator (5, 5, myDisplayer);
Sai:myCalculator (5, 5, myDisplayer ());
Khi nào sử dụng một cuộc gọi lại?
Các ví dụ trên không phải là rất thú vị.
Chúng được đơn giản hóa để dạy bạn cú pháp gọi lại.
Trường hợp các lệnh gọi lại thực sự tỏa sáng là trong các hàm không đồng bộ, nơi một hàm phải đợi một hàm khác (như chờ tải tệp).
Các hàm không đồng bộ được đề cập trong chương tiếp theo.