Gọi lại JavaScript

"I WILL CALLBACK"
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 JavaScript

Các hàm JavaScript được thực thi theo trình tự mà chúng được gọi. Không phải theo trình tự mà chúng được xác định.

Ví dụ sau sẽ kết thúc với câu "Goodbye!".

Ví dụ

function myDisplay(text) {
    document.getElementById('demo').innerHTML = text;    
}

function myFirst() {
    myDisplay("Hello!");    
}

function mySecond() {
    myDisplay("Goodbye!");    
}

myFirst();
mySecond();

Xem kết quả

Ví dụ này sẽ kết thúc với câu "Hello!".

Ví dụ

function myDisplay(text) {
    document.getElementById('demo').innerHTML = text;    
}

function myFirst() {
    myDisplay("Hello!");    
}

function mySecond() {
    myDisplay("Goodbye!");    
}
mySecond();
myFirst();

Xem kết quả

Kiểm soát trình tự hàm JavaScript

Đôi khi chúng ta muốn kiểm soát tốt hơn thời điểm để thực thi một hàm.

Giả sử chúng ta muốn thực hiện một phép tính và sau đó hiển thị kết quả.

Chúng ta có thể gọi một hàm tính toán (myCalculator), một biến lưu kết quả, rồi gọi một hàm khác (myDisplayer) để hiển thị kết quả từ biến đã lưu.

Ví dụ

function myCalculator(x1, x2) {
    var x;
    x = x1 + x2;
    return x;
}

function myDisplayer(y) {
    document.getElementById('demo').innerHTML = y;
}

var result = myCalculator(5, 5);
myDisplayer(result);

Xem kết quả

Hoặc, chúng ta 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).

Ví dụ

function myDisplayer(y) {
    document.getElementById('demo').innerHTML = y;
}

function myCalculator(x1, x2) {
    var x;
    x = x1 + x2;
    return myDisplayer(x);
}

myCalculator(5, 5);

Xem kết quả

Vấn đề với ví dụ đầu tiên ở trên, là chúng ta phải gọi hai hàm để hiển thị kết quả.

Vấn đề với ví dụ thứ hai là chúng ta không thể ngăn hàm myCalculator hiển thị kết quả.

Bây giờ là lúc để thực hiện gọi lại hàm.

Gọi lại hàm 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, chúng ta 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 nó kết thúc tính toán.

Ví dụ

function myDisplayer(y) {
    document.getElementById('demo').innerHTML = y;
}

function myCalculator(x1, x2, myCallback) {
    var x;
    x = x1 + x2;
    myCallback(x);
}

myCalculator(5, 5, myDisplayer);

Xem kết quả

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

Nó được chuyển đến hàm 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.
Đúng: myCalculator (5, 5, myDisplayer);
Sai: ~~myCalculator (5, 5, myDisplayer ());~~