Hãy cùng Brandon Morelli tìm hiểu và hiểu những điều cơ bản về lệnh gọi lại trong JavaScript, khi nào chúng hữu ích và cách sử dụng chúng.

Bạn đang xem : lệnh gọi lại trong javascript là gì

Khi học JavaScript, bạn sẽ không mất nhiều thời gian cho đến khi gặp lệnh gọi lại. Những điều này có vẻ kỳ lạ và bí ẩn đối với người mới bắt đầu, nhưng điều rất quan trọng là phải hiểu cách chúng hoạt động để khai thác sức mạnh của ngôn ngữ. Trong bài viết này, tôi sẽ dạy bạn những điều cơ bản về lệnh gọi lại bằng các ví dụ dễ hiểu.

Quay lại Kiến thức cơ bản: Gọi lại trong JavaScript là gì?

Gọi lại – hình ảnh qua unsplash

Gọi lại là gì?

Nói một cách đơn giản: Một hàm gọi lại là một hàm sẽ được thực thi sau khi một hàm khác (thường là không đồng bộ) đã hoàn thành việc thực thi – do đó có tên là “gọi lại”.

Nói một cách phức tạp hơn: Trong JavaScript, các hàm là các đối tượng. Do đó, các hàm có thể nhận 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à các hàm bậc cao. Bất kỳ hàm nào được truyền dưới dạng đối số và sau đó được gọi bởi hàm nhận nó, được gọi là hàm gọi lại.

Đó là rất nhiều từ. Hãy xem một số ví dụ để phân tích vấn đề này nhiều hơn một chút.

Bài viết này được xuất bản lần đầu tiên trên codeburst.io và được xuất bản lại tại đây với sự cho phép của tác giả. Nếu bạn thích đọc, tại sao không đến đó và xem một số bài viết khác của Brandon ? Nếu bạn muốn nâng cao kỹ năng JavaScript của mình nói chung, tại sao không truy cập vào SitePoint Premium và đăng ký khóa học Giới thiệu về JavaScript của chúng tôi.

Tại sao Chúng tôi Cần Gọi lại?

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ì đợi phản hồi trước khi chuyển sang, JavaScript sẽ tiếp tục thực thi trong khi lắng nghe các sự kiện khác. Hãy xem một ví dụ cơ bản:

  

function

first

< p class = "dấu chấm câu"> (

)

{

giao diện điều khiển

.

log

< p class = "dấu chấm câu"> (

1

)

;

}

function

thứ hai

(

)

{

giao diện điều khiển

.

log

< p class = "dấu chấm câu mã thông báo"> (

2

)

;

}

đầu tiên

(

)

;

thứ hai

(

)

;

Như bạn mong đợi, hàm đầu tiên được thực thi trước và hàm thứ hai được thực thi lần thứ hai – ghi nội dung sau vào bảng điều khiển:

 
 
 

Tất cả đều tốt cho đến nay.

Nhưng điều gì sẽ xảy ra nếu lần đầu tiên hàm chứa một số loại mã không thể thực thi ngay lập tức? Ví dụ: một yêu cầu API mà chúng ta phải gửi yêu cầu sau đó đợi phản hồi? Để mô phỏng hành động này, chúng tôi sẽ sử dụng setTimeout là một phương thức JavaScript gốc gọi một hàm sau một khoảng thời gian được chỉ định. Chúng tôi sẽ trì hoãn chức năng của mình trong 500 mili giây để mô phỏng một yêu cầu API. Mã mới của chúng tôi sẽ trông như thế này:

  

function

first

< p class = "dấu chấm câu"> (

)

{

setTimeout

(

setTimeout

> (

)

{

giao diện điều khiển

.

log

< p class = "dấu chấm câu"> (

1

)

;

}

,

500

)

;

}

function

thứ hai

(

)

{

giao diện điều khiển

.

log

< p class = "dấu chấm câu mã thông báo"> (

2

)

;

}

đầu tiên

(

)

;

thứ hai

(

)

;

Hiện tại, việc bạn hiểu cách hoạt động của setTimeout () không quan trọng (mặc dù nếu bạn tò mò, chúng tôi có một hướng dẫn về chính chủ đề đó ). Tất cả những gì quan trọng là bạn thấy rằng chúng tôi đã di chuyển console.log (1); trong vòng 500 mili giây trễ của chúng tôi. Vậy điều gì xảy ra bây giờ khi chúng ta gọi các hàm của mình?

  

đầu tiên

(

< p class = "dấu chấm câu">)

;

thứ hai

(

)

;

Mặc dù chúng tôi đã gọi hàm first () trước, chúng tôi đăng xuất kết quả của hàm đó sau hàm second ()

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

Xem Thêm  Ví dụ về báo cáo Bootstrap - mẫu báo cáo html bootstrap

Vậy tại sao lại cho bạn thấy điều này? Bởi vì bạn không thể chỉ gọi hết hàm này đến hàm khác và hy vọng chúng thực thi theo đúng thứ tự. Gọi lại là một cách để đảm bảo rằng một số mã nhất định không thực thi cho đến khi mã khác hoàn tất quá trình thực thi.

Tạo cuộc gọi lại

Được rồi, nói đủ rồi, hãy tạo một cuộc gọi lại!

Trước tiên, hãy mở bảng điều khiển dành cho nhà phát triển trình duyệt của bạn (bạn có thể thực hiện việc này bằng cách nhấn Ctrl + Shift + J trên Windows / Linux hoặc Cmd + Option + J trên Mac). Sau đó, nhập khai báo hàm sau vào bảng điều khiển của bạn:

  

function

doHomework

< p class = "dấu chấm câu mã thông báo"> (

chủ đề

)

{

alert

(

(

`

Bắt đầu

$ của tôi {

topic

}

bài tập về nhà.

`

)

;

}

Ở trên, chúng tôi đã tạo hàm doHomework . Hàm của chúng tôi nhận một biến, chủ đề mà chúng tôi đang làm việc. Gọi hàm của bạn bằng cách nhập thông tin sau vào bảng điều khiển của bạn:

  

doHomework

(

< p class = "chuỗi mã thông báo"> 'toán học'

)

;

Bây giờ, hãy thêm lệnh gọi lại của chúng ta – làm tham số cuối cùng của chúng ta trong hàm doHomework () mà chúng ta có thể chuyển trong lệnh gọi lại. Sau đó, hàm gọi lại được định nghĩa trong đối số thứ hai của lệnh gọi tới doHomework () .

  

function

doHomework

< p class = "dấu chấm câu"> (

chủ đề

,

gọi lại

)

{

alert

(

`

Bắt đầu

$ {

chủ đề < p class = "mã thông báo interpolation-dấu chấm câu">}

bài tập về nhà.

`

)

;

gọi lại

(

)

;

}

doHomework

(

'toán học'

,

hàm

(

)

{

alert

(

'Tôi đã hoàn thành bài tập về nhà'

)

;

}

)

;

Hãy thử ví dụ này trên JS Bin

JS Bin trên jsbin.com

Xem Thêm  4 cách phát hiện trình duyệt bằng Javascript (Ví dụ đơn giản) - javascript phát hiện phiên bản trình duyệt

Như bạn sẽ thấy, nếu bạn nhập mã trên vào bảng điều khiển của mình, bạn sẽ nhận được hai cảnh báo quay lại: Cảnh báo “Đang bắt đầu làm bài tập về nhà”, tiếp theo là cảnh báo “Đã hoàn thành bài tập về nhà”.

Nhưng không phải lúc nào các hàm gọi lại cũng phải được xác định trong lệnh gọi hàm của chúng tôi. 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

< p class = "dấu chấm câu"> (

chủ đề

,

gọi lại

)

{

alert

(

`

Bắt đầu

$ {

chủ đề < p class = "mã thông báo interpolation-dấu chấm câu">}

bài tập về nhà.

`

)

;

gọi lại

(

)

;

}

function

alertFinishing

(

)

{

alert

(

'Tôi đã hoàn thành bài tập về nhà'

)

;

}

doHomework

(

'toán học'

,

alertĐã hoàn thành

)

;

Hãy thử ví dụ này trên JS Bin:

Lệnh gọi lại trong JavaScript là gì? trên jsbin.com

Kết quả của ví dụ này hoàn toàn giống với ví dụ trước, nhưng cách thiết lập có một chút khác biệt. Như bạn có thể thấy, chúng tôi đã chuyển định nghĩa hàm alertFinishing làm đối số trong khi gọi hàm doHomework () !

Ví dụ về thế giới thực

Tuần trước, tôi đã xuất bản một bài viết về cách tạo bot Twitter trong 38 dòng mã . Lý do duy nhất khiến mã trong bài viết đó hoạt động là do API của Twitter. Khi bạn đưa ra yêu cầu đối với một API, bạn phải đợi phản hồi trước khi bạn có thể thực hiện phản hồi đó. Đây là một ví dụ tuyệt vời về trường hợp sử dụng trong thế giới thực cho các lệnh gọi lại. Đây là yêu cầu trông như thế nào:

  

T

.

< p class = "token method function property-access"> get

(

'search / tweets'

< p class = "dấu chấm câu">,

params

,

chức năng

(

err

,

dữ liệu

,

phản hồi

)

{

if

(

!

err

)

{

}

khác

{

giao diện điều khiển

.

log

< p class = "dấu chấm câu"> (

err

)

;

}

}

)

;

  • T.get chỉ có nghĩa là chúng tôi đang đưa ra yêu cầu GET tới Twitter.
  • Có ba tham số trong yêu cầu này: 'search / tweets' , là lộ trình yêu cầu của chúng tôi, params là các tham số tìm kiếm của chúng tôi và sau đó là ẩn danh là hàm gọi lại của chúng tôi.

Ở đây, một lệnh gọi lại rất quan trọng vì chúng ta cần đợi phản hồi từ máy chủ trước khi có thể chuyển tiếp mã của mình. Chúng tôi không biết liệu yêu cầu API của chúng tôi có thành công hay không, vì vậy sau khi gửi các tham số của chúng tôi tới search / tweets thông qua yêu cầu GET, chúng tôi sẽ đợi. Sau khi Twitter phản hồi, chức năng gọi lại của chúng tôi sẽ được gọi. Twitter sẽ gửi đối tượng err (error) hoặc đối tượng response cho chúng tôi. Trong hàm gọi lại, chúng ta có thể sử dụng câu lệnh if () để xác định xem yêu cầu của chúng ta có thành công hay không và sau đó thực hiện theo dữ liệu mới.

Xem Thêm  Cách mã hóa HTML một chuỗi - chuỗi javascript sang mã hóa html

Bạn đã làm nên điều đó

Làm tốt lắm! Bây giờ bạn có thể hiểu callback là gì và nó hoạt động như thế nào. Nhưng đây chỉ đơn thuần là phần nổi của tảng băng trôi, vẫn còn rất nhiều điều để học hỏi! Nếu bạn có bất kỳ câu hỏi hoặc nhận xét nào, tôi rất vui được nghe chúng trong phần nhận xét bên dưới.


Xem thêm những thông tin liên quan đến chủ đề callbacks trong javascript là gì

Hiểu kỹ về callback trong javascript

alt

  • Tác giả: Huy Dao Quang
  • Ngày đăng: 2015-01-28
  • Đánh giá: 4 ⭐ ( 7924 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: http://hoclaptrinhonline.org
    Hiểu kỹ về callback trong javascript

JavaScript: Callback là gì?

  • Tác giả: techmaster.vn
  • Đánh giá: 5 ⭐ ( 8598 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

Callback Là Gì – Callback Trong Javascript

  • Tác giả: truonggiathien.com.vn
  • Đánh giá: 3 ⭐ ( 9939 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Họcvà tìm hiểu khái niệm cơ bản về callback chỉ trong 6 phút với những ví dụ cơ bản.

[Series Callback javascript] Phần 1: Giới thiệu Callbacks.

  • Tác giả: anonystick.com
  • Đánh giá: 4 ⭐ ( 1222 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

    Có thể series này dành cho những bạn mới bắt đầu hoặc còn lơ mơ với ngôn ngữ Javascript. Cho nên tôi hy vọng rằng Series này là một trong những chìa khoá giúp bạn hiểu sâu hơn về những khái niệm trong javascript.

Callback Là Gì

  • Tác giả: www.codehub.com.vn
  • Đánh giá: 4 ⭐ ( 7903 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Trong ngôn ngữ javascript, khái niệm callback được sử dụng nhiều với sự phát triển của Ajax. Trong Nodejs, callback lại trở lên vô cùng quan trọng khi hầu hết các tí…

Callback trong Javascript là gì mà ai cũng muốn biết?

  • Tác giả: freetuts.net
  • Đánh giá: 5 ⭐ ( 5134 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Tìm hiểu khái niệm callback function là gì và một số ví dụ về callback function trong Javascript, các điểm lưu ý khi sử dụng và viết một callback function.

[JavaScript] Callback là gì?

  • Tác giả: viblo.asia
  • Đánh giá: 5 ⭐ ( 5172 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Callback là một khái niệm không mới. Tuy nhiên, nó là một trong những khái niệm khá lằng ngoằng và dễ nhầm lẫn trong lập trình. Mình xin giới thiệu callback trong javascript. Lý do chọn javascript là…

Xem thêm các bài viết khác thuộc chuyên mục: Kiến thức lập trình

By ads_php