Trang chủ > Javascript cơ bản

Lý thuyết

Mục tiêu

Sinh viên hiểu về hàm callback và cách sử dụng nó để giải quyết vấn đề trong thực tế.

Hàm callback là gì?

Hàm callback là một hàm được truyền vào một hàm khác dưới dạng đối số, sau đó được gọi bên trong hàm ngoài để hoàn thành một số loại thường trình hoặc hành động.

Ví dụ:

function finish_add_numbers() {
	console.log('Finish function');
}

function add_two_numbers(a, b, callback) {
	var sum = a + b;
	console.log(sum);
	callback();
}

add_two_numbers(2, 4, finish_add_numbers);
// output: 
// 6
// Finish function

JavaScript Callback s

function functionOne(x) { return x; };

function functionTwo(var1) {
    // some code
}

functionTwo(functionOne);

Phương thức chuyển các hàm này sang các hàm khác để sử dụng chúng bên trong được sử dụng trong các thư viện JavaScript ở hầu hết mọi nơi.

Tên chung cho hàm được truyền vào là hàm callback.

Trong lập trình máy tính, một cuộc gọi lại là một đoạn mã thực thi được truyền dưới dạng đối số cho mã khác, dự kiến sẽ gọi lại (thực thi) đối số vào một thời điểm thuận tiện.

Lệnh gọi có thể ngay lập tức như trong một cuộc gọi lại đồng bộ hoặc nó có thể xảy ra vào thời gian sau, như trong một cuộc gọi lại không đồng bộ.

Chúng tôi sẽ quay lại các cuộc gọi lại đồng bộ và không đồng bộ trong một phần khác.

function functionOne(x) { console.log(x); }

function functionTwo(var1, callback) {
    callback(var1);		
}

functionTwo(2, functionOne);

Đây là một ví dụ về việc sử dụng biến callback trong Hàm JavaScript.

One nhận một đối số và đưa ra x là đối số của nó.

FunctionTwo nhận 1 đối số và 1  function.

Sau đó, FunctionTwo chuyển đối số mà nó đưa vào cho hàm mà nó đã thực hiện.

FunctionOne là hàm callback trong trường hợp này.

Vì JavaScript có sẵn các hàm vô danh, bạn cũng có thể chuyển các Hàm vô danh dưới dạng một biến cho một hàm.

function functionTwo(var1, callback) {
    callback(var1);		
}

functionTwo(1, function (x) { alert(x); })

Trong trường hợp nay, hàm callback được khởi tạo khi chúng ta gọi functionTwo.

Hay nhớ rằng chúng ta có thể gọi hàm callback bên trong functionTwo nhiều lần nếu bạn muốn

function functionTwo(var1, callback) {
    callback(var1);	
    callback(var1);	
}

functionTwo(1, function (x) { console.log(x); })

Không giới hạn việc gọi bao nhiêu lần

Một điều khác cần chú ý là bạn có thể chuyển bao nhiêu hàm callback tùy thích sang chức năng khác.

function functionTwo(var1, var2, callback1, callback2) {
    callback1(var1);	
    callback2(var2);	
}

functionTwo(1, 2, function (x) { console.log(x); }, function (x) { console.log(x); })
Ở đây trong functionTwo chúng ta truyền vào hai biến và hai hàm làm đối số.
 
Bên trong functionTwo, chúng ta chạy callback1 với biến 1 và chúng ta chạy callback2 với biến 2.
 
Chúng ta hãy xem mã trong Bảng điều khiển JavaScript để xem nó hoạt động như thế nào.
function functionOne(x) { console.log(x); }

FunctionOne được định nghĩa để hiển thị giá trị của đối số được truyền vào nó.

Kiểm tra

functionOne(2);

Khi functionOne được gọi

FunctionOne sẽ hiển thị cho chúng ta số 2

Tiếp tục, Cũng định nghĩa functionTwo

function functionTwo(x) { console.log(x); }

FunctionTwo được định nghĩa để hiển thị giá trị của đối số được truyền vào nó.

Nó chính xác là giông functionOne

functionTwo(2);

When functionTwo is called

FunctionTwo sẽ hiển thị cho chúng ta số 2

Điều này được mong đợi bởi vì nó có chức năng tương tự như functionOne.

Chúng ta hãy viết lại định nghĩa của functionTwo để nó nhận một biến và một hàm.

Sau đó, nó sẽ truyền biến cho hàm được truyền vào.

function functionTwo(var1, callback) { callback(var1); }

Chúng tôi đặt tên cho hàm được truyền vào functionTwo là callback.

Hãy kiểm tra nó bằng cách chuyển số 2 và hàm functionOne

functionTwo(2, functionOne);

Khi functionTwo được gọi.

Nó làm việc giống như trước.

FunctionTwo sẽ hiển thị cho chúng ta số 2

Tuy nhiên, lần này, thay vì functionTwo có lệnh hiển thị bên trong nó, nó đã sử dụng lệnh bên trong functionOne.

Lần này hãy thử nó theo một cách khác.

Chúng tôi tiếp tục chuyển vào số 2, ngoại trừ lần này thay vì chuyển vào hàm functionOne, chúng tôi chuyển vào một hàm vô danh.

functionTwo(2, function(x) { console.log(x); });

Khi functionTwo được gọi.

Nó làm việc giống như trước.

FunctionTwo sẽ hiển thị cho chúng ta số 2

Tuy nhiên, lần này, thay vì functionTwo có lệnh cảnh báo bên trong nó, nó đã sử dụng lệnh bên trong hàm vô danh mà chúng ta đã truyền vào.

Chúng ta hãy viết lại định nghĩa của hàmTwo để nó có một biến và hai hàm.

function functionTwo(var1, callback1, callback2) {
    callback1(var1);
    callback2(var1);
}

Hàm hai bây giờ có một biến và hai hàm.

Chúng tôi đặt tên cho các hàm được truyền vào functionTwo là callback1 và callback2.

Sau đó, nó chuyển biến này đến hàm đầu tiên - callback1.

Sau đó nó chuyển biến này sang hàm thứ hai - callback2.

 

Hãy kiểm tra nó bằng cách chuyển số 2 và hàm functionOne trong hai lần

functionTwo(2, functionOne, functionOne);

Khi functionTwo được gọi.

Nó làm việc giống như trước cho mỗi hàm

FunctionTwo hiển thị số 2 với 2 lần

 

Cuối cùng, hãy kiểm tra nó bằng cách chuyển số 2, hàm functionOne và hàm vô danh.

Hàm vô danh sẽ hiển thị kết quả của việc thêm hai vào số được truyền vào nó.

functionTwo(2, functionOne, function(x) { alert(x+2); });

Khi functionTwo được gọi.

Đầu tiên sẽ hiển thị 2

Và sau đó sẽ hiển thị 4


Bài tập

Cho chương trình mẫu. Gọi hàm callback để hiển thị kết quả của a và b

  • Đầu vào: không có
  • Đầu ra: hiển thị kết quả của a và b