Callback Là Gì? Khi bạn đã sẵn sàng thực sự đi sâu vào phát triển web, hãy xem các khóa học tốt nhất để học cách phát triển web hiệu quả nhất.
Callback là gì?
Nói một cách đơn giản: callback là một hàm sẽ được thực thi sau khi một hàm khác thực thi xong – do đó có tên Callback..
Nói phức tạp hơn một chút: Trong Javascript, một hàm là một đối tượng, vì vậy nó có thể chấp nhận các tham số của hàm và nó cũng có thể trả về một hàm. Do đó, bất kỳ hàm nào được truyền dưới dạng tham số và sau đó được gọi sẽ được gọi là hàm gọi lại.
Điều này nghe có vẻ như rất nhiều từ, vì vậy hãy xem một số ví dụ để giải thích.
Xem thêm: Bệnh Trĩ Nội Là Gì?
Tại sao bạn cần Callback?
Điều này rất quan trọng vì Javascript là ngôn ngữ xử lý các sự kiện, vì vậy mỗi lần thực thi, thay vì đợi phản hồi, nó sẽ tiếp tục lệnh tiếp theo trong khi chờ các sự kiện khác phản hồi. Hãy xem xét ví dụ sau:
function first () {console.log (1);} function second () {console.log (2);} first (); second (); như bạn mong đợi, hàm đầu tiên thực hiện đầu tiên và hàm thứ hai lần thực hiện thứ hai. Bảng điều khiển trình duyệt in ra kết quả sau:
// 1 // 2 Tất cả đều ổn cho đến khi bạn đặt câu hỏi, nếu hàm đầu tiên chứa mã không thể thực thi khi được gọi, ví dụ: hàm đầu tiên phải thực hiện lệnh gọi API và mất bao lâu để nhận phản hồi? Để mô phỏng hành động này, ở đây tôi sẽ sử dụng setTimeout với độ trễ là 500ms. Mã mới sẽ giống như sau:
function first () {// Mô phỏng độ trễ mã setTimeout (function () {console.log (1);}, 500);} function second () {console.log (2);} first (); second (); Điều quan trọng bây giờ là bạn không quan tâm đến cách hoạt động của hàm setTimeout (). Lưu ý cách chúng tôi đã thêm vào console.log (1); độ trễ 500ms. Vậy điều gì sẽ xảy ra khi chúng ta gọi hàm?
first (); second (); // 2 // 1 Bạn có thể thấy rằng mặc dù chúng ta gọi hàm đầu tiên trước nhưng nó trả về kết quả sau hàm thứ hai.
Nó không phải là Javascript không được thực thi theo thứ tự chúng ta muốn, vấn đề là Javascript không đợi cho chức năng đầu tiên kết thúc, nó thực thi chức năng thứ hai. Để đảm bảo rằng Js được thực thi theo đúng thứ tự, chúng ta cần sử dụng khái niệm hàm gọi lại. Gọi lại là một cách để đảm bảo rằng mã không thể hoạt động cho đến khi mã khác hoàn tất quá trình thực thi.
Tạo cuộc gọi lại
Điều đầu tiên cần làm là mở Bảng điều khiển dành cho nhà phát triển Chrome (Windows: Ctrl + Shift + J) (Mac: Cmd + Option + J) trên máy của bạn và nhập khai báo chức năng sau vào Console.log của bạn:
function doHomework (subject) {alert (`Bắt đầu bài tập về nhà $ {subject} của tôi.`);}
Ở trên, chúng ta đã tạo hàm doHomework (). Hàm của chúng ta có một biến, là đối tượng mà chúng ta đang xử lý. Gọi hàm của bạn bằng cách nhập thông tin sau vào console.log:
function doHomework (subject) {alert (`Bắt đầu bài tập về nhà $ {subject} của tôi.`);}
Ở trên, chúng ta đã tạo hàm doHomework (). Hàm của chúng ta có một biến, là đối tượng mà chúng ta đang xử lý. Gọi hàm của bạn bằng cách nhập thông tin sau vào console.log:
doHomework (“math”); // Cảnh báo: Bắt đầu làm bài tập toán của tôi. Bây giờ chúng ta hãy thêm callback dưới dạng một tham số hàm. Sau đó, xác định lệnh gọi lại là tham số thứ hai trong lệnh gọi functiondoHomework ().
Xem thêm: Ranch Dressing Là Gì?
function doHomework (topic, callback) {alert (`Đang bắt đầu bài tập về nhà $ {subject} của tôi.`); callback ();} doHomework (” math “, function () {alert (” Đã hoàn thành bài tập về nhà của tôi “);}); Như bạn có thể thấy, nếu bạn nhập đoạn mã trên vào console.log, bạn sẽ nhận được hai cảnh báo: đầu tiên là “Bắt đầu bài tập về nhà toán học của tôi”, sau đó là “Hoàn thành bài tập về nhà của tôi”.
Tuy nhiên, không phải lúc nào hàm gọi lại cũng phải được xác định trong lệnh gọi Hàm. Chúng có thể được định nghĩa ở những nơi khác trong mã của chúng tôi như sau:
function doHomework (topic, callback) {alert (`Bắt đầu bài tập về nhà $ {subject} của tôi.`); callback ();} function alertFinishing () {alert (” Đã hoàn thành bài tập về nhà của tôi “);} doHomework (” math “, alertFicked) ; kết quả là hoàn toàn giống nhau, chỉ là cài đặt hơi khác một chút. Như bạn có thể thấy, chúng ta đã chuyển định nghĩa thông báo hàm alertFinishing làm tham số cho lệnh gọi Function doHomework ().
Ví dụ thực tế
Tuần trước, tôi đã xuất bản một bài viết về cách tạo Twitter Bot trong 38 dòng mã. Lý do duy nhất khiến mã trong bài viết đó hoạt động là API Twitters. Khi bạn yêu cầu một API, bạn phải đợi phản hồi trước khi tiếp tục các công việc tiếp theo.
Đây là một ví dụ điển hình về gọi lại. Đây là các yêu cầu:
T.get (“search / tweets”, params, function (err, data, response) {if (! Err) {// Đây là nơi điều kỳ diệu xảy ra} else {console.log (err);}}) T. nhận được chỉ có nghĩa là chúng tôi đang thực hiện một yêu cầu nhận đến Twitter. Yêu cầu này chứa tất cả 3 tham số: “search / tweets” là đường dẫn đến yêu cầu, “params” là tham số của yêu cầu API và một hàm ẩn danh đóng vai trò.
Lệnh gọi lại quan trọng ở đây là vì chúng tôi không chắc chắn khi nào chúng tôi thực hiện yêu cầu API. Liệu phản hồi có được trả lại hay không, vì vậy, lệnh gọi lại ở đây sẽ giúp chúng tôi đảm bảo rằng chỉ khi yêu cầu thành công, chúng tôi sẽ hoạt động trong lệnh gọi lại, chúng tôi có thể sử dụng câu lệnh if () để xác định xem yêu cầu đó có thành công, và sau đó xử lý dữ liệu mới cho phù hợp.
Tham khảo thêm: Nho Giáo Là Gì?
Kết bài
Trên đây là những kiến thức cơ bản về callback mà những người sử dụng Js thường gặp phải. Hy vọng nó sẽ giúp bạn hiểu callback là gì và nó hoạt động như thế nào. Tuy nhiên, đó vẫn chỉ là phần nổi của tảng băng chìm của toàn bộ cuộc gọi lại và còn rất nhiều điều phải suy nghĩ và học hỏi.
Chúc các bạn thành công và gặp nhiều may mắn!
Hãy thường xuyên truy cập website Eurowindow Đông Anh của chúng tôi để cập nhật nhiều thông tin hữu ích nhé!
