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
Xin chào Peter Tôi là hàm gọi lại
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 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
Xin chào John Xin chào thế giới
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 sao Hello John được in trước Hello world.
Đ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, hàm thứ hai không đợi hàm đầ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
Xin chào thế giới Xin chào 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áy chủ vì dữ liệu phải mất thời gian mới đến được.
