Lệnh gọi lại JavaScript
"Tôi sẽ gọi lại sau!"
Lệnh gọi lại là một hàm được truyền dưới dạng đối số cho hàm khác
Kỹ thuật này cho phép một hàm gọi một hàm khác
Chức năng gọi lại có thể chạy sau khi chức năng khác kết thúc
Trình tự chức năng
Các hàm JavaScript được thực thi theo trình tự chúng được gọi. Không theo trình tự chúng được xác định.
Ví dụ này sẽ hiển thị "Tạm biệt":
Ví dụ
function myFirst() {
myDisplayer("Hello");
}
function
mySecond() {
myDisplayer("Goodbye");
}
myFirst();
mySecond();
Ví dụ này sẽ hiển thị "Xin chào":
Ví 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 hiện một chức năng.
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ả và sau đó gọi một hàm khác ( myDisplayer
) để hiển thị kết quả:
Ví 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 hàm máy tính ( myCalculator
) và để hàm máy tính gọi hàm hiển thị ( myDisplayer
):
Ví 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 thực hiện cuộc gọi lại.
Lệnh gọi lại JavaScript
Lệnh 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.
Bằng cách sử dụng lệnh gọi lại, bạn có thể gọi hàm máy tính ( myCalculator
) bằng lệnh gọi lại ( myCallback
) và để hàm máy tính chạy lệnh gọi lại sau khi tính toán xong:
Ví dụ
function myDisplayer(some) {
document.getElementById("demo").innerHTML
= some;
}
function myCalculator(num1, num2, myCallback) {
let sum = num1 + num2;
myCallback(sum);
}
myCalculator(5, 5, myDisplayer);
Hãy tự mình thử » Trong ví dụ trên, myDisplayer
được gọi là hàm gọi lại .
Nó được chuyển tới myCalculator()
làm đối số .
Ghi chú
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()) ;
Ví dụ
// Create an Array
const myNumbers = [4, 1, -20, -7, 5, 9, -6];
// Call removeNeg with a callback
const posNumbers = removeNeg(myNumbers, (x) => x >= 0);
// Display Result
document.getElementById("demo").innerHTML = posNumbers;
// Keep only positive numbers
function removeNeg(numbers, callback) {
const myArray = [];
for (const x of numbers) {
if (callback(x)) {
myArray.push(x);
}
}
return myArray;
}
Hãy tự mình thử » Trong ví dụ trên, (x) => x >= 0
là hàm gọi lại .
Nó được chuyển đến removeNeg()
làm đối số .
Khi nào nên sử dụng tính năng gọi lại?
Các ví dụ trên không thú vị lắm.
Chúng được đơn giản hóa để dạy cho bạn cú pháp gọi lại.
Trường hợp lệnh gọi lại thực sự tỏa sáng là ở các hàm không đồng bộ, trong đó một hàm phải đợi một hàm khác (như chờ tải tệp).
Các chức năng không đồng bộ sẽ được đề cập trong chương tiếp theo.