Hàm CallBack trong JavaScript

Trong hướng dẫn này, bạn sẽ tìm hiểu về các hàm gọi lại của JavaScript với sự trợ giúp của các ví dụ.

Hàm là một khối mã thực hiện một tác vụ nào đó khi được gọi. Ví dụ,

// function
function greet(name) {
    console.log('Hi' + ' ' + name);
}

greet('Peter'); // Hi Peter

Trong chương trình trên, một giá trị chuỗi được truyền làm đối số cho greet()hàm.

Trong JavaScript, bạn cũng có thể chuyển một hàm làm đối số cho một hàm. Hàm này được truyền như một đối số bên trong một hàm khác được gọi là hàm gọi lại. Ví dụ,

// function
function greet(name, callback) {
    console.log('Hi' + ' ' + name);
    callback();
}

// callback function
function callMe() {
    console.log('I am callback function');
}

// passing function as an argument
greet('Peter', callMe);

Đầu ra

Hi Peter
I am callback function

Trong chương trình trên, có hai chức năng. Trong khi gọi greet()hàm, hai đối số (một giá trị chuỗi và một hàm) được truyền.

Các callMe()chức năng là một chức năng gọi lại.

Lợi ích của chức năng gọi lại

Lợi ích của việc sử dụng một hàm gọi lại là bạn có thể đợi kết quả của một lệnh gọi hàm trước đó và sau đó thực hiện một lệnh gọi hàm khác.

Trong ví dụ này, chúng ta sẽ sử dụng setTimeout()phương thức để bắt chước chương trình cần thời gian để thực thi, chẳng hạn như dữ liệu đến từ máy chủ.

Ví dụ: Chương trình với setTimeout ()

//  program that shows the delay in execution

function greet() {
    console.log('Hello world');
}

function sayName(name) {
    console.log('Hello' + ' ' + name);
}

// calling the function
setTimeout(greet, 2000);
sayName('John');

Đầu ra

Hello John
Hello world

Như bạn đã biết, phương thức setTimeout () thực thi một khối mã sau thời gian được chỉ định.

Ở đây, greet()hàm được gọi sau 2000 mili giây ( 2 giây). Trong thời gian chờ đợi này, lệnh sayName('John');được thực thi. Đó là lý do tại saochào John được in trước Chào thế giới.

Đoạn mã trên được thực thi không đồng bộ (hàm thứ hai; sayName()không đợi hàm đầu tiên; greet()hoàn thành).

Ví dụ: Sử dụng hàm gọi lại

Trong ví dụ trên, chức năng thứ hai không đợi chức năng đầu tiên hoàn thành. Tuy nhiên, nếu bạn muốn đợi kết quả của lệnh gọi hàm trước đó trước khi câu lệnh tiếp theo được thực thi, bạn có thể sử dụng hàm gọi lại. Ví dụ,

// Callback Function Example
function greet(name, myFunction) {
    console.log('Hello world');

    // callback function
    // executed only after the greet() is executed
    myFunction(name);
}

// callback function
function sayName(name) {
    console.log('Hello' + ' ' + name);
}

// calling the function after 2 seconds
setTimeout(greet, 2000, 'John', sayName);

Đầu ra

Hello world
Hello John

Trong chương trình trên, mã được thực thi đồng bộ. Các sayName()chức năng được thông qua như là một cuộc tranh cãi với greet()chức năng.

Các setTimeout()phương pháp thực hiện các greet()chức năng chỉ sau 2 giây. Tuy nhiên, sayName()hàm chờ thực thi greet()hàm.

Lưu ý : Chức năng gọi lại rất hữu ích khi bạn phải đợi kết quả mất thời gian. Ví dụ: dữ liệu đến từ một máy chủ vì dữ liệu phải mất thời gian mới đến được.