Callback là gì?

Callback trong JavaScript là một hàm được truyền vào một hàm khác dưới dạng đối số và được gọi lại (hoặc “callback”) sau khi một tác vụ hoặc quá trình đã hoàn thành. Callback thường được sử dụng trong các tình huống bất đồng bộ, ví dụ như xử lý sự kiện, đọc dữ liệu từ file, gọi API, hoặc các tác vụ tốn thời gian khác mà không làm chặn chương trình.

Cấu trúc của Callback:

  • Hàm callback: Là một hàm mà bạn truyền vào một hàm khác.
  • Hàm gọi callback: Hàm nhận callback làm đối số và sẽ gọi nó khi cần thiết, ví dụ như khi hoàn thành một tác vụ.

Ví dụ về Callback trong JavaScript:

function greet(name, callback) {
    console.log('Hello, ' + name);
    callback();  // Gọi hàm callback sau khi greet xong
}

function sayGoodbye() {
    console.log('Goodbye!');
}

greet('Alice', sayGoodbye);
// Kết quả:
// Hello, Alice
// Goodbye!

Ở ví dụ trên:

  • Hàm greet nhận hai tham số: name và một hàm callback.
  • Sau khi in ra lời chào, hàm greet gọi hàm callback, mà trong trường hợp này là hàm sayGoodbye.

Callback trong Tình Huống Bất Đồng Bộ:

JavaScript thường sử dụng callback để xử lý các tác vụ bất đồng bộ, chẳng hạn như gọi API hoặc xử lý dữ liệu khi nó có sẵn. Một ví dụ phổ biến là với setTimeout:

console.log('Start');

setTimeout(function() {
    console.log('This runs after 2 seconds');
}, 2000);

console.log('End');
Start
End
This runs after 2 seconds

Callback với Các Tác Vụ Bất Đồng Bộ:

Giả sử bạn cần đọc dữ liệu từ một file, bạn sẽ dùng callback để xử lý dữ liệu khi việc đọc file hoàn tất.

function readFile(filename, callback) {
    // Giả sử đọc file thành công và trả về nội dung
    const content = "File content here";
    callback(content);  // Trả lại nội dung qua callback
}

readFile("example.txt", function(data) {
    console.log("File content: " + data);
});

Ưu điểm của Callback:

  • Xử lý bất đồng bộ: Callback cho phép xử lý các tác vụ mà không làm chặn chương trình chính.
  • Tách biệt logic: Bạn có thể chia tách các phần xử lý và xử lý chúng một cách độc lập.

Callback Hell:

Khi có quá nhiều callback lồng nhau (nếu bạn phải gọi nhiều hàm bất đồng bộ theo trình tự), mã sẽ trở nên khó đọc và bảo trì, được gọi là callback hell.
Ví dụ:

doSomething(function(result1) {
    doSomethingElse(result1, function(result2) {
        doAnotherThing(result2, function(result3) {
            console.log(result3);
        });
    });
});

Để giải quyết vấn đề này, bạn có thể sử dụng Promises hoặc async/await, giúp mã dễ đọc và quản lý hơn.

Tóm lại:

  • Callback trong JavaScript là một hàm được truyền vào một hàm khác và sẽ được gọi lại khi một tác vụ hoàn thành.
  • Nó giúp xử lý các tác vụ bất đồng bộ, nhưng có thể gây ra callback hell khi có nhiều hàm callback lồng nhau.