Hướng dẫn cơ bản về lệnh gọi lại JavaScript – javascript gọi lại là gì

Trong hướng dẫn này, bạn sẽ tìm hiểu về các lệnh gọi lại JavaScript và cách chúng được sử dụng để xử lý các hoạt động không đồng bộ.

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

Tóm tắt < / strong>: trong hướng dẫn này, bạn sẽ tìm hiểu về các hàm gọi lại trong JavaScript bao gồm các hàm gọi lại đồng bộ và không đồng bộ.

Hàm gọi lại là gì

Trong JavaScript, các hàm là công dân hạng nhất . Do đó, bạn có thể chuyển một hàm sang một hàm khác dưới dạng đối số.

Theo định nghĩa, lệnh gọi lại là một hàm mà bạn chuyển vào một hàm khác như đối số để thực thi sau.

Hàm sau xác định hàm filter () chấp nhận mảng gồm các số và trả về một mảng số lẻ mới:

 

function

filter

(

number

)

{

let

results = [];

cho

(

const

number

of

number) {

if

(number%

2

! =

0

) { results.push (số); } }

trả về kết quả

; }

let

number = [

1

,

2

,

4

,

7

,

3

,

5

,

6

];

console

.log (filter (số));

Ngôn ngữ mã:

< p class = "shcb-language__name"> JavaScript

(

javascript

)

Cách hoạt động.

  • Đầu tiên, hãy xác định hàm filter () chấp nhận một mảng số và trả về một mảng mới gồm các số lẻ.
  • Thứ hai, xác định mảng số có cả số lẻ và số chẵn.
  • Thứ ba, gọi Hàm filter () để lấy các số lẻ ra khỏi mảng số và xuất ra kết quả.

Nếu bạn muốn trả về một mảng chứa các số chẵn, bạn cần sửa đổi hàm filter () . Để làm cho hàm filter () chung chung hơn và có thể tái sử dụng, bạn có thể:

  • Đầu tiên, trích xuất logic trong khối if và quấn nó trong một hàm riêng biệt.
  • Thứ hai, chuyển hàm vào hàm filter () làm đối số.

Đây là mã được cập nhật:

 

chức năng

< p class = "hljs-title"> isOdd

(

number

)

{

return

number%

2

! =

0

; }

function

bộ lọc

(

số, fn

)

{

let

results = [];

cho

(

const

number

of

number) {

nếu

(fn (number)) { results.push (số); } }

trả về kết quả

; }

let

number = [

1

,

2

,

4

,

7

,

3

,

5

,

6

];

console

.log (filter (số, isOdd));

Ngôn ngữ mã:

JavaScript

(

javascript

)

Kết quả giống nhau. Tuy nhiên, bạn có thể chuyển bất kỳ hàm nào chấp nhận một đối số và trả về giá trị boolean cho đối số thứ hai của hàm filter () .

Ví dụ: bạn có thể sử dụng filter () hàm để trả về một mảng các số chẵn như sau:

 

< p class = "hljs-function">

function

isOdd

(

số

)

{

return

number%

2

! =

0

; }

function

isEven

(

number

)

{

return

number%

2

==

0

; }

function

bộ lọc

(

số, fn

)

{

let

results = [];

cho

(

const

number

of

number) {

nếu

(fn (number)) { results.push (số); } }

trả về kết quả

; }

let

number = [

1

,

2

,

4

,

7

,

3

,

5

,

6

];

console

.log (filter (số, isOdd));

console

.log (filter (number, isEven));

Mã ngôn ngữ:

JavaScript

(

javascript

)

Theo định nghĩa, isOdd isEven là các hàm gọi lại hoặc lệnh gọi lại. Vì hàm filter () chấp nhận một hàm làm đối số, nên nó được gọi là hàm bậc cao.

Một hàm gọi lại có thể là một hàm ẩn danh, là một hàm không có tên như thế này:

 

chức năng

bộ lọc

(

số, gọi lại

)

{

let

results = [];

cho

(

const

number

of

number) {

if

(callback (number)) { results.push (số); } }

trả về kết quả

; }

let

number = [

1

,

2

,

4

,

7

,

3

,

5

,

6

];

let

retailNumbers = filter (số,

function

(

số

)

{

return

number%

2

! =

0

; });

console

.log (retailNumbers);

Ngôn ngữ mã:

JavaScript

(

javascript

)

Trong ví dụ này, chúng tôi chuyển một hàm ẩn danh vào hàm filter () thay vì sử dụng một hàm riêng biệt.

Trong ES6, bạn có thể sử dụng hàm mũi tên như sau:

 

function

bộ lọc

(

số , gọi lại

)

{

let

results = [];

cho

(

const

number

of

number) {

if

(callback (number)) { results.push (số); } }

trả về kết quả

; }

let

number = [

1

,

2

,

4

,

7

,

3

,

5

,

6

];

let

retailNumbers = filter (number, (number) = & gt; number%

2

! =

0

);

console

.log (retailNumbers);

Ngôn ngữ mã:

JavaScript

(

javascript

)

Có hai loại lệnh gọi lại: lệnh gọi lại đồng bộ và không đồng bộ.

Lệnh gọi lại đồng bộ

Một lệnh gọi lại đồng bộ được thực thi trong quá trình thực thi hàm bậc cao sử dụng lệnh gọi lại. isOdd isEven là các ví dụ về lệnh gọi lại đồng bộ vì chúng thực thi trong quá trình thực thi hàm filter () .

Lệnh gọi lại không đồng bộ

Một lệnh gọi lại không đồng bộ được thực thi sau khi thực thi hàm bậc cao sử dụng lệnh gọi lại.

Tính không đồng bộ có nghĩa là nếu JavaScript phải đợi một hoạt động hoàn thành, thì sẽ thực thi phần còn lại của mã trong khi chờ đợi.

Lưu ý rằng JavaScript là ngôn ngữ lập trình đơn luồng. Nó thực hiện các hoạt động không đồng bộ thông qua hàng đợi gọi lại và vòng lặp sự kiện .

Giả sử bạn cần phát triển một tập lệnh tải ảnh xuống từ máy chủ từ xa và xử lý sau khi quá trình tải xuống hoàn tất:

 

function

tải xuống

(

url

)

{ }

function

process

(

hình ảnh

)

{ } tải xuống (url); process (picture);

Ngôn ngữ mã:

JavaScript

(

javascript

)

Tuy nhiên, đang tải xuống ảnh từ máy chủ từ xa mất thời gian tùy thuộc vào tốc độ mạng và kích thước của ảnh.

Hàm download () sau sử dụng setTimeout () chức năng mô phỏng yêu cầu mạng:

 

< p class = "hljs-keyword"> function

tải xuống

(

url

)

{ setTimeout (

()

= & gt;

{

console

.log (

`Đang tải xuống

$ {url}

.. .`

); },

1000

); }

Ngôn ngữ mã:

JavaScript

(

javascript

)

Và mã này mô phỏng process () function:

 

function

process

(

picture

) {

console

.log (

`Xử lý

$ {picture}

` < / p>); }

Ngôn ngữ mã:

JavaScript

(

javascript

)

Khi bạn thực thi đoạn mã sau:

 

let

url =

'https://www.javascripttutorial.net/pic.jpg'

; tải xuống (url); process (url);

Ngôn ngữ mã:

JavaScript

(

javascript

)

bạn sẽ nhận được đầu ra sau:

 

Xử lý https: Đang tải xuống https:

Ngôn ngữ mã:

JavaScript

(

javascript

)

Đây không phải là thứ bạn được mong đợi vì hàm process () thực thi trước hàm download () . Trình tự đúng phải là:

  • Tải ảnh xuống và đợi quá trình tải xuống hoàn tất.
  • Xử lý ảnh.

Để giải quyết vấn đề này, bạn có thể chuyển hàm process () sang hàm download () và thực thi hàm process () bên trong hàm download () sau khi quá trình tải xuống hoàn tất, như sau:

 

function

tải xuống

(

url, callback

)

{ setTimeout (

()

= & gt;

{

console

.log (

`Đang tải xuống

$ {url}

.. .`

); gọi lại URL); },

1000

); }

function

process

(

hình ảnh

)

{

console

.log (

`Xử lý

$ {picture}

` < / p>); }

let

url =

'https://wwww.javascripttutorial.net/pic.jpg'

; tải xuống (url, process);

Ngôn ngữ mã:

JavaScript

(

javascript

)

Đầu ra:

 

Đang tải xuống https: Đang xử lý https:

Ngôn ngữ mã:

JavaScript

(

javascript

)

Giờ đây, nó hoạt động như mong đợi.

Trong ví dụ này, process () là một lệnh gọi lại được chuyển vào một hàm không đồng bộ.

Khi bạn sử dụng lệnh gọi lại để tiếp tục thực thi mã sau hoạt động không đồng bộ, lệnh gọi lại được gọi là lệnh gọi lại không đồng bộ.

Để làm cho mã ngắn gọn hơn, bạn có thể xác định hàm process () là một hàm ẩn danh:

 

chức năng

tải xuống

(

url, callback

)

{ setTimeout (

()

= & gt;

{

console

.log (

`Đang tải xuống

$ {url}

.. .`

); gọi lại URL); },

1000

); }

let

url =

'https://www.javascripttutorial.net/pic.jpg'

; tải xuống (url,

function

(

picture

)

{

console

.log (

`Xử lý

$ {picture}

` < / p>); });

Ngôn ngữ mã:

JavaScript

(

javascript

)

Xử lý lỗi

Hàm download () giả định rằng mọi thứ hoạt động tốt và không xem xét bất kỳ trường hợp ngoại lệ nào. Đoạn mã sau giới thiệu hai lệnh gọi lại: thành công thất bại để xử lý các trường hợp thành công và thất bại tương ứng:

 < p>  

function

tải xuống < / p> (

url, thành công, thất bại

)

{ setTimeout (

()

= & gt;

{

console

.log (

`Đang tải ảnh xuống từ

$ {url} ... `

); ! url? fail (url): thành công (url); },

1000

); } Tải xuống(

''

, (url) = & gt;

console

.log (

`Xử lý ảnh

$ {url}

`

), (url) = & gt;

console

.log (

`The '

$ {url}

' không hợp lệ`

) );

Ngôn ngữ mã:

JavaScript

(

javascript

)

Tổ chức các lệnh gọi lại và Kim tự tháp diệt vong < / h3>

Làm cách nào để bạn tải xuống ba bức ảnh và xử lý chúng một cách tuần tự? Một cách tiếp cận điển hình là gọi hàm download () bên trong hàm gọi lại, như sau:

 

function

tải xuống

(

url, gọi lại

)

{ setTimeout (

()

= & gt;

{

console

.log (

`Đang tải xuống

$ {url}

.. .`

); gọi lại URL); },

1000

); }

const

url1 =

'https://www.javascripttutorial.net/pic1.jpg'

;

const

url2 =

'https://www.javascripttutorial.net/pic2.jpg'

;

const

url3 =

'https://www.javascripttutorial.net/pic3.jpg'

; tải xuống (url1,

function

(

url

)

{

console

.log (

`Xử lý

$ {url}

` < / p>); tải xuống (url2,

function

(

url

)

{

console

.log (

`Xử lý

$ {url}

` < / p>); tải xuống (url3,

function

(

url

)

{

bảng điều khiển

.log (

`Xử lý

$ {url}

`

); }); }); });

Ngôn ngữ mã:

JavaScript

(

javascript

)

Đầu ra:

 

Đang tải xuống https: Đang xử lý https: Đang tải xuống https: Đang xử lý https: Đang tải xuống https: Đang xử lý https:

Ngôn ngữ mã:

JavaScript

(

javascript

)

Tập lệnh hoạt động hoàn toàn tốt .

Tuy nhiên, chiến lược gọi lại này không mở rộng quy mô tốt khi độ phức tạp tăng lên đáng kể.

Việc lồng nhiều hàm không đồng bộ bên trong lệnh gọi lại được gọi là kim tự tháp của sự diệt vong hoặc địa ngục gọi lại :

 

asyncFunction (

function

(

)

{ asyncFunction (

function

(

)

{ asyncFunction (

function

(

)

{ asyncFunction (

function

(

)

{ asyncFunction (

function

(

)

{ .... }); }); }); }); });

Ngôn ngữ mã:

JavaScript

(

javascript

)

Để tránh kim tự tháp diệt vong, bạn sử dụng các hàm hứa hẹn hoặc async / await .

Tóm tắt

  • Gọi lại là một hàm được truyền vào một hàm khác dưới dạng một đối số sẽ được thực thi sau này.
  • Hàm bậc cao là một hàm chấp nhận một hàm khác làm đối số.
  • Các hàm gọi lại có thể đồng bộ hoặc không đồng bộ.
  • < / ul>

    Hướng dẫn này có hữu ích không?


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

Fetch - Fetch trong Javascript?

  • Tác giả: F8 Official
  • Ngày đăng: 2020-09-26
  • Đánh giá: 4 ⭐ ( 7190 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: 🔥 Hãy chia sẻ các khóa học để mọi người được học MIỄN PHÍ ❤️
    🔥 Truy cập http://fullstack.edu.vn (miễn phí) để làm bài tập và quản lý được tiến độ học của bạn. Trong tương lai còn giúp bạn có hồ sơ đẹp trong mắt Nhà Tuyển Dụng.
    🔥 Tham gia nhóm Học lập trình tại F8 trên Facebook: https://www.facebook.com/groups/f8official/

    hoclaptrinh mienphi frontend backend devops
    ---------------------------------------
    HỌC LẬP TRÌNH MIỄN PHÍ
    1. Khóa Javascript cơ bản: https://fullstack.edu.vn/courses/javascript-co-ban
    2. Khóa HTML, CSS: https://fullstack.edu.vn/courses/html-css
    3. Khóa Responsive web design: https://fullstack.edu.vn/courses/responsive-web-design
    4. Khóa Xây dựng web với NodeJS & ExpressJS: https://fullstack.edu.vn/courses/nodejs
    ---------------------------------------
    LIÊN KẾT HỮU ÍCH
    1. Học lập trình: http://fullstack.edu.vn
    2. Viết CV xin việc: http://mycv.vn
    3. Danh sách phát Youtube: https://www.youtube.com/channel/UCNSCWwgW-rwmoE3Yc4WmJhw/playlists
    -----------------------------------------------------------
    LIÊN HỆ
    1. Facebook: https://fb.com/sondnmc
    2. Email: sondnf8@gmail.com

    Yêu các bạn ❤️

[JavaScript] Callback là gì?

  • Tác giả: viblo.asia
  • Đánh giá: 3 ⭐ ( 3937 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à...

Hàm then () có nghĩa là gì trong JavaScript?

  • Tác giả: qastack.vn
  • Đánh giá: 4 ⭐ ( 2531 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: [Tìm thấy giải pháp!] Cách truyền thống để xử lý các cuộc gọi không đồng bộ trong JavaScript là với…

Mọi Thứ Bạn Cần Biết Về Function - Javascript

  • Tác giả: codelearn.io
  • Đánh giá: 5 ⭐ ( 3842 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Các hàm (Function) là một trong những nền tảng cơ bản trong Javascript. Vậy bạn đã nắm hết những kiến thức về Function trong Javascript chưa?

JavaScript là gì? Tìm hiểu lợi ích và cách hoạt động

  • Tác giả: funix.edu.vn
  • Đánh giá: 4 ⭐ ( 4493 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Nếu không có JavaScript, hầu hết các tính năng máy tính và thiết bị di động tương tác, chẳng hạn như phương tiện hoặc trò chơi, sẽ không hoạt động bình thường.

Top 10 câu hỏi phỏng vấn JavaScript

  • Tác giả: hocjavascript.net
  • Đánh giá: 5 ⭐ ( 2388 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Dưới đây là top 10 câu hỏi phỏng vấn JavaScript dựa trên tổng hợp các câu hỏi mà nhà tuyển dụng hay đặt ra cho ứng viên về chuyên môn.

JavaScript: Callback là gì?

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

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

Xem Thêm  Dễ dàng trong css là gì? - thoải mái trong dễ dàng ra css