Kịch bản thuyết trình: Slides 79, 80

Mình tiếp tục với slide 79 và 80 về JavaScript Callback Functions.

Callback là gì?

Callback là một hàm được truyền làm đối số cho một hàm khác, để hàm kia có thể gọi lại (call back) khi cần.

Thường dùng để xử lý thứ tự thực thi hoặc hoạt động sau khi hàm khác hoàn thành.

Khi nào dùng Callback?

• Khi cần điều khiển thứ tự thực thi giữa các hàm.
• Hữu ích trong cả trường hợp đồng bộ (synchronous) và bất đồng bộ (asynchronous).

Cách dùng Callback trong JavaScript

a) Đồng bộ (Synchronous Callback)

Ví dụ:

function calculate(a, b, callback) {
    let result = a + b;
    callback(result); // call back after calculation
}

function showResult(sum) {
    console.log("The sum is:", sum);
}

calculate(5, 3, showResult);
// Output: The sum is: 8

Ở đây:

• showResult được truyền vào calculate làm callback.
• Sau khi cộng xong, calculate gọi lại showResult để hiển thị kết quả.

b) Bất đồng bộ (Asynchronous Callback)

Xem code ví dụ của hình bên:

function fetchData(callback) {
    setTimeout(() => {
        let data = "User data loaded";
        callback(data); // call back after delay
    }, 2000);
}

function display(data) {
    console.log(data);
}

console.log("Start fetching...");
fetchData(display);
console.log("Continue working...");

// Output:
// Start fetching...
// Continue working...
// (2s later) User data loaded

Ở ví dụ này:

• setTimeout mô phỏng việc lấy dữ liệu (mất 2 giây).
• Trong khi chờ, chương trình vẫn chạy tiếp.
• Sau 2 giây, callback display được gọi để in dữ liệu.

Như vậy:

• Synchronous callback: chạy ngay, theo đúng thứ tự.
• Asynchronous callback: chạy sau, không chặn chương trình.

Để xử lý bất đồng bộ (tức là ép cho chương trình chạy đúng thứ tự, vui lòng tham khảo thêm tại:

• https://www.w3schools.com/js/js_promise.asp
• https://www.w3schools.com/js/js_async.asp

Như vậy là mình đã trình bày xong về Callback Functions trong JavaScript.