Hướng dẫn what is callback function in javascript? - hàm gọi lại trong javascript là gì?

Hàm gọi lại là một hàm được truyền vào một hàm khác như một đối số, sau đó được gọi bên trong hàm bên ngoài để hoàn thành một số loại thường xuyên hoặc hành động.

Đây là một ví dụ nhanh:

function greeting(name) {
  alert(`Hello, ${name}`);
}

function processUserInput(callback) {
  const name = prompt("Please enter your name.");
  callback(name);
}

processUserInput(greeting);

Ví dụ trên là một cuộc gọi lại đồng bộ, vì nó được thực hiện ngay lập tức.

Tuy nhiên, lưu ý rằng các cuộc gọi lại thường được sử dụng để tiếp tục thực thi mã sau khi một thao tác không đồng bộ đã hoàn thành - chúng được gọi là các cuộc gọi lại không đồng bộ. Một ví dụ điển hình là các chức năng gọi lại được thực hiện bên trong một khối .then() bị xích vào cuối một lời hứa sau khi lời hứa đó đáp ứng hoặc từ chối. Cấu trúc này được sử dụng trong nhiều API Web hiện đại, chẳng hạn như fetch().

Một cuộc gọi lại JavaScript là một hàm sẽ được thực thi sau khi một chức năng khác hoàn thành thực thi.

Một định nghĩa chính thức hơn sẽ là - bất kỳ hàm nào được truyền dưới dạng đối số cho một hàm khác để nó có thể được thực thi trong hàm khác được gọi là hàm gọi lại.

Cần các chức năng gọi lại

Chúng tôi cần các chức năng gọi lại vì nhiều hành động JavaScript không đồng bộ, điều đó có nghĩa là chúng không thực sự ngăn chặn chương trình (hoặc một hàm) chạy cho đến khi chúng hoàn thành, như bạn có thể đã quen. Thay vào đó, nó sẽ thực thi trong nền trong khi phần còn lại của mã chạy.

Chúng ta hãy xem một ví dụ trong thế giới thực để hiểu nó (hàm gọi lại đồng bộ) tốt hơn.

Mục đích chính của gọi lại là thực thi mã để đáp ứng với một sự kiện. Những sự kiện này có thể được khởi xướng người dùng, chẳng hạn như nhấp chuột hoặc gõ. Với một cuộc gọi lại, bạn có thể hướng dẫn ứng dụng của mình "thực thi mã này mỗi khi người dùng nhấp vào phím trên bàn phím."

const nút = document.getEuityById ('nút'); function ralback () {console.log ("hello world");}
function callback(){
console.log("Hello world");
}

button.addEventListener('click',callback);

Trong mã trên, chúng tôi thêm addEventListener làm hàm và chúng tôi đang chuyển một cuộc gọi lại chức năng khác làm đối số. Và khi một sự kiện nhấp chuột được kích hoạt, AddEventListener đăng ký chức năng gọi lại.

Một ví dụ nữa! (Hàm gọi lại không đồng bộ)

Nếu bạn muốn tải xuống dữ liệu từ một máy chủ (có thể mất thời gian dài), sẽ rất lãng phí cho chương trình hoặc chức năng của bạn chỉ để đóng băng trong khi bạn chờ dữ liệu được tìm nạp. Thay vào đó, đó là thông lệ để thực hiện hoạt động tìm nạp trong nền.

Điều này ngụ ý rằng nếu bạn có hai chức năng liên tiếp, một trong số đó là không đồng bộ, chức năng B sẽ được thực hiện trong khi các chức năng còn lại vẫn đang chạy. Nếu hàm B phụ thuộc vào dữ liệu mà hàm A đang truy xuất, bạn sẽ gặp phải các vấn đề.

hàm async fetchusers () {& nbsp; const resp = Await fetch (''); & nbsp; người dùng const = Await resp.json (); & nbsp; const name = user.map (({login}) => đăng nhập); & nbsp; Console.log (tên);}
  const resp = await fetch('');
  const users = await resp.json();
  const names = users.map(({ login }) => login);
  console.log(names);
}

Một từ khóa Async được đặt làm tiền tố cho hàm để tạo ra một hàm không đồng bộ.

Hàm trên lấy dữ liệu người dùng giả của 10 người dùng. Sau đó, chúng tôi đang chuyển đổi nó thành một đối tượng JSON để trích xuất dữ liệu người dùng.

Các chức năng không đồng bộ trở lại một lời hứa, khi hàm không đồng bộ gặp phải thuật ngữ đang chờ (lưu ý rằng Fetch () đưa ra một lời hứa), nó dừng thực thi cho đến khi lời hứa được giải quyết. Để đọc thêm về lời hứa bấm vào đây.

Hàm gọi lại không đồng bộ khác với hàm không đồng bộ. Hàm bậc cao thực thi hàm gọi lại không đồng bộ theo cách không chặn. Tuy nhiên, trong khi chờ đợi lời hứa (chờ đợi lời hứa>) để giải quyết, chức năng không đồng bộ dừng thực thi.

Chúng ta có thể biến điều này thành một cuộc gọi lại không đồng bộ bằng cách thêm nó vào một sự kiện, giống như nhấp chuột.

nút const = document.getEuityById ('fetchusers');

nút.

Gọi lại và gọi lại địa ngục

Có nhiều cách để xử lý các cuộc gọi lại lồng nhau, sử dụng Async đang chờ đợi như đã thảo luận ở trên hoặc sử dụng cách hứa hẹn trường học cũ (đọc về lời hứa) hoặc chia mã thành các chức năng khác nhau.

Sử dụng lời hứa

Chúng ta phải tạo ra một lời hứa mới cho mỗi cuộc gọi lại để chuyển đổi chúng thành lời hứa. Khi cuộc gọi lại thành công, chúng tôi có thể giải quyết lời hứa. Nếu cuộc gọi lại thất bại, chúng ta có thể từ chối lời hứa.

hàm getUserPromise {& nbsp; const newuser = getuserfromapi (người dùng)
  const newUser = getUserFromApi(user)

& nbsp; trả về lời hứa mới ((giải quyết, từ chối) => {& nbsp; & nbsp; if (user) {& nbsp; & nbsp; & nbsp; resolve (người dùng) & nbsp; Không còn người dùng mới nữa! ')) & Nbsp; & nbsp;} & nbsp;})}
    if (user) {
      resolve(user)
    } else {
      reject(new Error('No more new users!'))
    }
  })
}

Bây giờ bạn có thể tạo thêm một hàm và gọi hàm trên là một cuộc gọi lại.

Sử dụng Async-Bayait

Chúng ta đã thấy cách tạo một cuộc gọi lại không đồng bộ trong phần trên.

Chúng ta có thể viết các chức năng không đồng bộ như thể chúng đồng bộ (thực hiện tuần tự) với việc sử dụng chờ đợi khi nó dừng thực thi cho đến khi lời hứa được giải quyết (thực thi chức năng thành công).

const userprofile = async () => {& nbsp; const user = Await fetchusers (1) // Đối số chỉ ra số lượng người dùng để tìm nạp & nbsp; const UpdatedAddress = Await UpdateAddress (Người dùng) & NBSP; const pincode = Await getPincode () & nbsp; const updateUser = Await UpdateUser (người dùng, UpdateDadress, pincode) & nbsp; trả về người dùng}
  const user = await fetchUsers(1) // argument indicated number of users to fetch
  const updatedAddress = await updateAddress(user)
  const pincode = await getPincode()
  const updateUser = await updateUser(user, updatedAdress, pincode)
  return user
}

// tìm nạp và cập nhật hồ sơ người dùngUserProfile ()
userProfile()

Bạn cũng có thể làm tổ các chức năng này trong lời hứa.

Chúng tôi cung cấp bảo đảm công việc hoàn chỉnh và tiền trở lại nếu bạn không đảm bảo công việc trong vòng 6 tháng sau khi tốt nghiệp. Hãy sẵn sàng phỏng vấn với các buổi cố vấn nghề nghiệp mạnh mẽ và toàn diện trong chương trình nhà phát triển Java Stack đầy đủ của chúng tôi. Ghi danh hôm nay!

Sự kết luận

Chúng tôi đã xem xét những gì và tại sao các chức năng gọi lại trong JavaScript, cùng với các ví dụ sử dụng các hàm đồng bộ và không đồng bộ để hiểu các cuộc gọi lại.

Cuối cùng, chúng tôi cũng đề cập đến những cuộc gọi lại được lồng vào nhau và cách giải quyết chúng bằng cách sử dụng lời hứa và ASYNC-BÀI VIẾT.

Để tìm hiểu thêm về JavaScript và các tính năng tuyệt vời của nó cung cấp năng lượng cho các trang web, hãy thực hiện phát triển web đầy đủ & NBSP; khóa học.

Bạn cũng có thể đăng ký trên nền tảng Skillup của chúng tôi để cải thiện kiến ​​thức phát triển phần mềm. Đây là một sáng kiến ​​SimpleLearn cung cấp các khóa học trực tuyến miễn phí để giúp bạn trau dồi các kỹ năng của mình trong nhiều ngôn ngữ lập trình, bao gồm JavaScript. & NBSP;