Hiểu đơn giản về hàm Callback trong Javascript

Posted on Updated on by adminChuyên mục:Kiến thức Internet

Chắc là bạn đã nghe về hàm Callback trong Javascript?

Hàm Callback trong Javascript

Hàm Callback trong Javascript

Vậy Callback là gì?

Hãy cùng mình tìm hiểu callback qua bài viết này nhé. (Sau đó, bên dưới có ví dụ để bạn dễ hiểu hơn)

Callback là gì?

Nói một cách đơn giản: Callback là một hàm sẽ được thực hiện sau khi một hàm khác đã thực hiện xong – vì thế nó có tên là callback.

Cụ thể hơn: Trong JavaScript, hàm là đối tượng. Do đó, các hàm có thể lấy các hàm làm đối số và có thể được trả về bởi các hàm khác. Các hàm thực hiện điều này được gọi là higher – order function (Hàm bậc cao hơn). Bất kỳ hàm nào được truyền dưới dạng đối số được gọi là hàm callback.

Hơi khó hiểu một chút nhỉ? 😀

Ok, vậy hãy thử xem qua ví dụ về hàm callback nào.

Tại sao chúng ta cần hàm Callback?

Chúng ta cần hàm callback vì một lý do rất quan trọng – JavaScript là ngôn ngữ hướng sự kiện.

Điều này có nghĩa là thay vì chờ phản hồi trước khi tiếp tục, JavaScript sẽ tiếp tục thực thi trong khi lắng nghe các sự kiện khác.

Hãy xem xét một ví dụ cơ bản:

functionfirst(){
    console.log(" Một ");
}
functionsecond(){
    console.log(" Hai ");
}
first();
second();

HỌC JAVASCRIPT CƠ BẢNNếu như bạn đãrồi thì bạn cũng biết :

  • Trình biên dịch đọc mã từ trên xuống dưới, từ trái qua phải .
  • Hàm viết trước thì được thực thi trước và hàm viết sau thì được thực thi sau .

Chương trình này sẽ ghi nhật ký sau vào console :

/ / Một/ / Hai

Tất cả đều tốt.

Nhưng cái gì sẽ xảy ra nếu hàm first chứa một số loại code không thể thực thi ngay lập tức?

Ví dụ: Một API request mà chúng ta phải gửi yêu cầu sau đó chờ 1 khoảng thời gian để nhận phản hồi?

Để mô phỏng hành động này, chúng ta sẽ sử dụng setTimeout

Đây là một hàm JavaScript gọi một hàm sau một khoảng thời gian nhất định.

Chúng ta sẽ tạm hoãn hàm của mình trong 5000 mili giây để mô phỏng API request.

Code Javascript mới của chúng ta sẽ trông như thế này:

functionfirst(){
    / / Mô phỏng delay codesetTimeout( function(){
        console.log(" Một ");
    }, 5000);
}
functionsecond(){
    console.log(" Hai ");
}

Bạn không cần phải hiểu cách hàm setTimeout() hoạt động ngay bây giờ.

Tất cả vấn đề là bạn thấy là chúng ta đã di chuyển console.log(1); vào bên trong hàm setTimeout().

Vậy thì, bây giờ chúng ta gọi hàm thì điều gì sẽ xảy ra?


first();
second();

/ / Hai/ / Một

Mặc dù chúng ta đã gọi hàm first() trước tiên, nhưng lại nhận được kết quả sau hàm second().

Nó không phải là JavaScript đã không thực hiện các hàm của chúng ta theo thứ tự mà chúng ta muốn, mà là JavaScript đã không đợi phản hồi từ hàm first() trước khi chuyển sang thực hiện second().

Vậy tại sao mình lại cho bạn thấy điều này?

Bởi vì bạn có thể chỉ cần gọi một hàm khác và hy vọng chúng thực hiện theo đúng thứ tự.

Callback là một cách để đảm bảo code nhất định không thực thi cho đến khi code khác thực hiện xong.

Thử tạo hàm Callback trong Javascript

OK, bây giờ hãy thử tạo một hàm callback trong JavaScript.

Hãy mở Visual Studio Code > Tạo một file callback.js và gõ đoạn code sau:

functiondoHomework(subject) {
    console.log(`Bắt đầu làm bài tập ${subject}.`);
}

Lưu ý: Dấu ` không phải dấu '

Ở trên, chúng ta đã tạo ra hàm doHomework(). Hàm này có một biến subject.

Tiếp đến, chúng ta gọi hàm:


doHomework(' Toán ');
/ / Bắt đầu làm bài tập Toán .

Bây giờ, hãy thêm callback làm tham số thứ 2 của hàm doHomework().

Hàm callback sau đó được định nghĩa trong đối số thứ hai của lệnh gọi doHomework() của chúng ta.

functiondoHomework(subject, callback) {
    console.log(`Bắt đầu làm bài tập ${subject}.`);
    callback();
}

doHomework(' math ', function() {
    console.log(' Làm bài tập xong ! ');
});

Như bạn sẽ thấy, tác dụng là :

/ / Bắt đầu làm bài tập Toán/ / Làm bài tập xong !

Nhưng hàm callback không phải lúc nào cũng được định nghĩa trong hàm gọi của chúng ta.

Chúng có thể được định nghĩa hàm callback ở nơi khác trong Javascript như thế này:


function doHomework(subject, callback) {

    setTimeout( 

function

(){

        console.log(` Bắt đầu làm bài tậpUSD {subject}. `);

        callback();

    }, 5000);

}

function alertFinished(){

    console.log(‘ Làm bài tập xong ! ‘);

}

doHomework(‘ Toán ‘, alertFinished);
 

Kết quả của ví dụ này trọn vẹn giống với ví dụ trước, nhưng thiết lập hơi khác một chút ít .

/ / Bắt đầu làm bài tập Toán/ / Làm bài tập xong !

Như bạn có thể thấy, chúng ta đã chuyển định nghĩa hàm alertFinished() làm đối số trong lệnh gọi hàm doHomework().

Đây là một phương pháp rất thông dụng trong lập trình web / lập trình JavaScript. Nhưng cẩn trọng callback hell bạn nhé. 😀

KHÓA HỌC REACT> Tham khảo ngay ( 3 tháng ) nếu bạn muốn đi nâng cao về JavaScript

KHÓA HỌC LẬP TRÌNH FULL STACK> Hoặc ( 12 tháng ) nếu như bạn muốn trở thành một lập trình viên Full Stack. Học chuyên nghiệp hơn, lộ trình rõ ràng hơn với chuyên viên doanh nghiệp .

Đây chưa phải tất cả về Callback function trong Javascript!

Bây giờ, qua ví dụ bên trên, có thể bạn đã hiểu callback là gì và cách hàm callback hoạt động trong Javascript.

Nhưng đây chỉ là phần nổi của tảng băng của hàm callback, vẫn còn rất nhiều điều để tìm hiểu!

Nếu bạn có bất kỳ câu hỏi hoặc nhận xét nào, vui để lại bình luận ở bên dưới nhé.

—

HỌC VIỆN ĐÀO TẠO CNTT NIIT – ICT HÀ NỘI

Học Lập trình chất lượng cao ( Since 2002 ). Học thực tiễn + Tuyển dụng ngay !

Đc : Tầng 3, 25T2, N05, Nguyễn Thị Thập, CG cầu giấy, TP.HN

SĐT : 02435574074 – 0383.180086

E-Mail : [email protected]

Website : https://final-blade.com

Fanpage: https://facebook.com/NIIT.ICT/

# niit # icthanoi # niithanoi # niiticthanoi # hoclaptrinh # khoahoclaptrinh # hoclaptrinhjava # hoclaptrinhphp

admin