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 : lệnh gọi lại js là gì

Tóm tắt : 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 < / span>. 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ủ đề gọi lại js là gì

#4 Callback functions - Khi Cần Thì Gọi Lại | JavaScript Nâng Cao Cho Beginners Từ A Đến Z

  • Tác giả: Hỏi Dân IT
  • Ngày đăng: 2021-11-11
  • Đánh giá: 4 ⭐ ( 1830 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Callback, dịch ra tiếng việt có nghĩa là 'gọi lại', là cách chúng ta thực thư một function, bên trong một functions. Trong video này, chúng ta sẽ cùng nhau tìm hiểu về cách sử dụng callback với javascript.
    Chi tiết và cụ thể, các bạn cùng theo dõi video này nhé ❤
    -----
    🌹Bạn nào muốn donate hay mua cho mình cốc cà phê, cái pizza hay chỉ là gói mì tôm hảo hảo, tiếp thêm động lực cho mình làm nhiều video chất lượng, thì các bạn có thể liên hệ qua:
    🤝Dùng MoMo quét mã QR tại link này nhé: https://nhantien.momo.vn/hoidanit (lưu ý: tên người nhận là PHAM VAN TUAN)

    😁Mình có 1 channel khác (Tiếng Anh, tên là haryphamdev), nên là có 2 Fanpage Facebook: Link channel Tiếng Anh: https://www.youtube.com/channel/UCHqJxLo7mKam9GKqqwr2wfA
    1. Facebook Fanpage (Tiếng việt): https://www.facebook.com/askITwithERIC
    2. Facebook Fanpage (Tiếng anh): https://www.facebook.com/haryphamdev
    -----

    🚀 Khóa học Free FullStack SERN (SQL, Express, React, Node.js): https://www.youtube.com/watch?v=21tjOW8BvB4&list=PLncHg6Kn2JT6E38Z3kit9Hnif1xC_9VqI

    👀 Khóa Học React Hook Function Component Từ A đến Z cho Beginners: https://www.youtube.com/watch?v=_gZTmBF7__M&list=PLncHg6Kn2JT4xzJyhXfmJ53dzwVbq-S_E

    👀 Khóa Học React Class Component Từ A đến Z cho Beginners: https://www.youtube.com/watch?v=ONnlXF4mpIg&list=PLncHg6Kn2JT4C0enPGQPK7ZIlEoZ1ZvRy

    👀 Khóa Học Javascript Siêu Cơ Bản Từ A đến Z cho Beginners: https://www.youtube.com/watch?v=2Uthlmwd2bI&list=PLncHg6Kn2JT5dfQqpVtfNYvv3EBVHHVKo

    🎁 Tài liệu tham khảo sử dụng trong video:
    👉 Nội dung khóa học: https://docs.google.com/document/d/1_UZzrezLClYBu-H_rddgSztAFiXKqdtNivhvumE4M4o/edit?usp=sharing

    👉 Xem full khóa học này tại đây : https://www.youtube.com/watch?v=IkKDSS_6qy4&list=PLncHg6Kn2JT4eGJ__iQv6BrvL_YnZLHyX

    ------------------------------------ IMPORTANT -----------------------------
    🚀 Learn by doing : Hiện tại, mình đang làm 1 series miễn phí, học và thực hành để trở thành 1 fullstack web developer từ A đến Z. Và để thực hiện được mục tiêu này, khóa học này chính là thứ rất cần thiết dành cho các bạn beginners - JavaScript Nâng Cao - Những kiến thức cần biết để sử dụng thành thạo Javascript "hiện đại" ngày nay.

    1️⃣ Các bạn nhận được gì khi kết thúc khóa học?

    ✔ Các bạn hiểu được Javascript có thể làm những gì, những keywords cần biết như là async, await, Promise..., chúng ta sẽ chú trọng vào những kiến thức cơ bản nhưng cốt lõi nhất.

    Phương châm của mình luôn là "chỉ nên học những cái mà các công ty cần", không nên học tràn lan, tỏ ra ta đây cái gì cũng biết, cơ mà bản chất lại không biết (hiểu) gì.

    Các bạn nên nhớ rằng, đối với những người mới bắt đầu, nên đi chậm nhưng mà chắc, không cần code siêu, chỉ cần biết cách 'google search' là được.

    2️⃣ Nội dung khóa học ?
    ✔Mình dự định sẽ làm 1 series hướng dẫn full từ A đến Z những kiến thức căn bản(cốt lõi) của Javascript cho những bạn chưa biết gì, những người mới bắt đầu dấn thân vào học và thành thạo Javascript

    ✔Khóa này chính là bước đệm để các bạn có thể chuẩn bị một công cụ cũng như kiến thức cần thiết, từ đó có thể làm những cái to tát hơn, như làm game, app và website thực tế.

    3️⃣ Công nghệ sử dụng ?
    ✔ HTML, CSS và Javascript.

    4️⃣ Lịch trình ra video ?
    Hiện tại, mình đang đi làm fulltime, vì vậy không thể dành 100% thời gian làm video khóa học này được. Tuy nhiên, mình luôn cố gắng để làm video đều đặn và thường xuyên, vì mình nhận được rất nhiều tin nhắn cũng như comment của các bạn, mong muốn được học khóa học này ❤
    👉 Tối thiểu là 1 tuần sẽ có 2 video về khóa học, còn đôi khi mình có nhiều thời gian rảnh thì 1 tuần 7 cái luôn 😁

    👉Các bạn muốn video ra nhanh thì đừng quên Đăng Ký Kênh, Like, Share và Comment bên dưới video để mình có thêm động lực làm video nha. Cảm ơn các bạn nhiều 💕💕💕

    👉 Đây là video thứ tự 4 trong khóa học này

    ------------------------------------ IMPORTANT -----------------------------

    🧠 Nội dung video:
    0:00 Giới thiệu
    1:30 Callback là gì
    7:20 Khi nào dùng Callback
    8:50 Tạo callback
    13:00 Callback với tham số
    17:30 Bất đồng bộ cùng callback

    🌎 Tìm mình tại đây:
    1. Facebook Fanpage (Tiếng việt): https://www.facebook.com/askITwithERIC
    2. Facebook Fanpage (Tiếng anh): https://www.facebook.com/haryphamdev
    3. Group trao đổi học tập Facebook: https://www.facebook.com/groups/hoidanit
    4. Github: https://github.com/haryphamdev
    5. Youtube channel: https://www.youtube.com/channel/UCVkBcokjObNZiXavfAE1-fA
    6. Email: haryphamdev@gmail.com

    ĐỪNG QUÊN NHẤN CHUÔNG 🔔 ĐỂ NHẬN CẬP NHẬT VIDEO MỚI NHẤT CŨNG NHƯ ► ĐĂNG KÝ KÊNH! ► https://bit.ly/31P4KhK

    KhoaHocJavaScriptNangCao JavaScript HoiDanIT

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

  • Tác giả: funix.edu.vn
  • Đánh giá: 5 ⭐ ( 4582 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.

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

  • Tác giả: qastack.vn
  • Đánh giá: 4 ⭐ ( 6364 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…

Câu hỏi phỏng vấn JavaScript nhiều cấp độ cùng hướng dẫn trả lời

  • Tác giả: itguru.vn
  • Đánh giá: 5 ⭐ ( 6847 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Hơn 50 câu hỏi phỏng vấn JavaScript ở các cấp độ khó dễ khác nhau cùng hướng dẫn trả lời và các tài liệu tham khảo hữu ích

JAVASCRIPT LÀ GÌ? ỨNG DỤNG CỦA NGÔN NGỮ JAVASCRIPT

  • Tác giả: www.greenacademy.edu.vn
  • Đánh giá: 4 ⭐ ( 2512 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: JavaScript là một trong những ngôn ngữ lập trình web phổ biến nhất hiện nay. Cùng với HTML và CSS, đây là bộ ba ngôn ngữ cơ bản dành cho những lập trình viên mới bắt đầu với việc lập trình website. Hãy cùng Green Academy tìm hiểu về ngôn ngữ lập trình này một cách rõ hơn bạn nhé!

Callbacks trong JavaScript

  • Tác giả: websitehcm.com
  • Đánh giá: 3 ⭐ ( 8284 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Callbacks trong JavaScript w3seo sử dụng hàm callback trong JavaScript, hướng dẫn sử dụng callback trong JS

[JavaScript Là Gì] Cách viết JavaScript cơ bản

  • Tác giả: vietnix.vn
  • Đánh giá: 4 ⭐ ( 2882 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: JavaScript đang được quan tâm bởi nhiều ưu điểm nổi trội so với các ngôn ngữ lập trình khác. Bạn muốn tìm hiểu JavaScript là gì? Qua bài viết này sẽ giúp bạn hiểu và có thể viết JavaScript cơ bản với một số ví dụ cụ thể trong bài. Xem ngay

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  Học JavaScript: 10 mẹo hay nhất để học JavaScript từ Scratch - học viết javascript

By ads_php