Cách Sử Dụng Hàm Gọi Lại Trong JavaScript

Một hàm là một khối mã thực hiện một nhiệm vụ cụ thể khi được gọi. Ví dụ,

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

greet('Peter'); // Hi Peter

Run Code

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

Trong JavaScript, bạn cũng có thể truyền một hàm như một đối số cho một hàm khác. 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à một hàm gọi lại (callback function). 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);

Run Code

Kết Quả

Xin chào Peter Tôi là hàm gọi lại

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

Hàm callMe() là một hàm gọi lại.

Lợi Ích của Hàm 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 cuộc gọi hàm trước và sau đó thực hiện một cuộc gọi hàm khác.

Trong ví dụ này, chúng tôi sẽ sử dụng phương thức setTimeout() để mô phỏng chương trình mất thời gian thực hiện, ví dụ như dữ liệu đang đế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');

Run Code

Kết Quả

Hello John
Hello world

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

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

Mã trên được thực hiện bất đồng bộ (hàm thứ hai; sayName() không chờ 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, hàm thứ hai không chờ cho đến khi hàm đầu tiên hoàn thành. Tuy nhiên, nếu bạn muốn đợi kết quả của cuộc gọi hàm trước trước khi câu lệnh tiếp theo được thực hiện, bạn có thể sử dụng một 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);

Run Code

Kết Quả

Hello world
Hello John

Trong chương trình trên, mã được thực hiện đồng bộ. Hàm sayName() được truyền như một đối số cho hàm greet().

Phương thức setTimeout() thực hiện hàm greet() chỉ sau 2 giây. Tuy nhiên, hàm sayName() đợi cho đến khi hàm greet() được thực hiện.

Ghi Chú : Hàm gọi lại hữu ích khi bạn phải đợi kết quả mà mất thời gian. Ví dụ, dữ liệu đang đến từ máy chủ vì nó mất thời gian để dữ liệu đến.

• Bài đăng trên blog này được xuất bản ban đầu tại:https://www.programiz.com/