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

Chào mừng bạn tới với website Blogchiaseaz, Hôm nay blogchiaseaz.com sẽ giới thiệu tới bạn về bài viết Hiểu đơn giản về hàm Callback trong Javascript, Hãy cùng chúng tôi tìm hiểu rõ hơn về bài viết Hiểu thuần tuý về hàm Callback trong Javascript bên dưới

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 với ví dụ để bạn dễ hiểu hơn)

Callback là gì?

Nói một cách thuần tuý: Callback là một hàm sẽ được thực hiện sau lúc một hàm khác đã thực hiện xong – vì thế nó với tên là callback.

Cụ thể hơn: Trong JavaScript, hàm là đối tượng. Do đó, những hàm với thể lấy những hàm làm đối số và với thể được trả về bởi những hàm khác. Những 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.

Khá khó hiểu một tẹo nhỉ? 😀

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

Bạn đang đọc: Hiểu thuần tuý về hàm Callback trong Javascript

Vì 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 yếu – JavaScript là tiếng nói hướng sự kiện.

Điều này với tức thị thay vì chờ phản hồi trước lúc tiếp tục, JavaScript sẽ tiếp tục thực thi trong lúc lắng tai những 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 triển khai trước và hàm viết sau thì được triển khai 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 dòng gì sẽ xảy ra nếu hàm first chứa một số loại code ko thể thực thi ngay ngay thức thì?

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 kì để 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 kì 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 ko cần phải hiểu cách hàm setTimeout() hoạt động ngay hiện 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ì, hiện 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ó ko phải là JavaScript đã ko thực hiện những hàm của chúng ta theo thứ tự mà chúng ta muốn, mà là JavaScript đã ko đợi phản hồi từ hàm first() trước lúc chuyển sang thực hiện second().

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

Bởi vì bạn với thể chỉ cần gọi một hàm khác và kỳ 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 ko thực thi cho tới lúc code khác thực hiện xong.

Thử tạo hàm Callback trong Javascript

OK, hiện 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(`Khởi đầu làm bài tập ${subject}.`);
}

Lưu ý: Dấu ` ko phải dấu '

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

Tiếp tới, chúng ta gọi hàm:

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

Ngày nay, hãy thêm callback làm thông số thứ 2 của hàm doHomework().

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

functiondoHomework(subject, callback) {
    console.log(`Khởi đầ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à :

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

Nhưng hàm callback ko phải lúc nào cũng được khái niệm trong hàm gọi của chúng ta.

Chúng với thể được khái niệm hàm callback ở nơi khác trong Javascript như thế này:


function doHomework(subject, callback) {

    setTimeout( 

function

Xem thêm: Android Auto – Wikipedia tiếng Việt

(){

        console.log(` Khởi đầ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 khá khác một tẹo ít .

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

Như bạn với thể thấy, chúng ta đã chuyển khái niệm 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 thậ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 tăng 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 nhiều năm kinh nghiệm 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!

Ngày nay, qua ví dụ bên trên, với thể bạn đã hiểu callback là gì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 với bất kỳ nghi vấn 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. Hà Nội

SĐT : 02435574074 – 0383.180086

E-Mail : [email protected]

Website : https://blogchiaseaz.com

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

Xem thêm: Nghĩa Của Từ Callout Là Gì ? Nghĩa Của Từ Callouts Trong Tiếng Việt

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

Source: https://blogchiaseaz.com
Category: Hỏi Đáp

Tham khảo thêm: Hiểu thuần tuý về hàm Callback trong Javascript

Related Posts