Let's talk about callback functions in JavaScript and distinguish between synchronous and asynchronous callbacks

This article will talk about callback functions in JavaScript, explain the concept of callback functions, and learn about synchronous callbacks and asynchronous callbacks to see how to distinguish them. I hope it will be helpful to everyone!

#Callback functions are one of the concepts that every JS developer should know. Callbacks are used in arrays, timer functions, promises, event handlers, etc.

In this article, the concept of callback function will be explained. In addition, it will also help Smartmi distinguish between two types of callbacks: Synchronous and asynchronous .

1. Callback function

We write a greeting function. First, create a function greet(name), which returns the welcome message:

function greet(name) {
  return `Hello, ${name}!`;
}

greet('小智'); // => 'Hello, 小智!'

What to do if you want to greet some people? Here, we can use the array.map() method:

const persons = ['小智', '王大冶']
const messages = persons.map(greet)

messages // ["Hello, 小智!", "Hello, 王大冶!"]

persons.map(greet)Accepts each item of the person array , and use each item as a calling parameter to call the function greet(): greet('Xiao Zhi'), greet('Wang Daye') .

What’s interesting is that the persons.map(greet) method accepts the greet() function as a parameter. Doing so will make reet() a callback function.

persons.map(greet) is a function that accepts another function as a parameter, so it is named higher-order function.

Higher-order functions bear all the responsibility of calling the callback function and providing it with the correct parameters.

In the previous example, the higher-order function persons.map(greet) is responsible for calling the greet() callback function with each item of the array as a parameter : 'Xiao Zhi' and 'Wang Daye'.

We can write our own higher-order functions using callbacks. For example, here is the equivalent of array.map()method

function map(array, callback) {
  const mappedArray = [];
  for (const item of array) { 
    mappedArray.push(
      callback(item)
    );
  }
  return mappedArray;
}

function greet(name) {
  return `Hello, ${name}!`;
}

const persons = ['小智', '王大冶']

const messages = map(persons, greet);

messages // ["Hello, 小智!", "Hello, 王大冶!"]

map(array, callback) is a higher-order function because it accepts a callback function As a parameter, the callback function is then called inside its function body: callback(item).

2. Synchronous callback

There are two ways to call callback: synchronous and asynchronous callback.

Synchronous callbacks are executed during the execution of higher-order functions that use callbacks.

In other words, the synchronous callback is in a blocking state: the higher-order function cannot complete its execution until the callback has finished executing.

function map(array, callback) {
  console.log('map() 开始');
  const mappedArray = [];
  for (const item of array) { mappedArray.push(callback(item)) }
  console.log('map() 完成');
  return mappedArray;
}

function greet(name) {
  console.log('greet() 被调用 ');
  return `Hello, ${name}!`;
}
const persons = ['小智'];

map(persons, greet);

// map() 开始
// greet() 被调用 
// map() 完成

greet() is a synchronous callback function because it is executed simultaneously with the higher-order function map().

2.1 Examples of synchronous callbacks

Many native JavaScript type methods use synchronous callbacks.

The most commonly used are array methods, such as array.map(callback), array.forEach(callback), array.find(callback), array.filter(callback), array.reduce(callback, init)：

// 数组上的同步回调的示例

const persons = ['小智', '前端小智']
persons.forEach(
  function callback(name) {
    console.log(name);
  }
);
// 小智
// 前端小智

const nameStartingA = persons.find(
  function callback(name) {
    return name[0].toLowerCase() === '小';
  }
)
// nameStartingA // 小智

const countStartingA = persons.reduce(
  function callback(count, name) {
    const startsA = name[0].toLowerCase() === '小';
    return startsA ? count + 1 : count;
  }, 
  0
);

countStartingA // 1

3. Asynchronous callback

Asynchronous callback Executed after executing higher-order functions.

In short, asynchronous callbacks are non-blocking: higher-order functions do not need to wait for a callback to complete their execution, and higher-order functions ensure that the callback is later executed on a specific event.

In the following example, later()The execution delay of the function is 2 seconds

console.log('setTimeout() 开始')
setTimeout(function later() {
  console.log('later() 被调用')
}, 2000)
console.log('setTimeout() 完成')

// setTimeout() 开始
// setTimeout() 完成
// later() 被调用(2秒后)

3.1 Example of asynchronous callback

Timer function Asynchronous callback:

setTimeout(function later() {
  console.log('2秒过去了!');
}, 2000);

setInterval(function repeat() {
  console.log('每2秒');
}, 2000);

DOM event listener is also asynchronously calling event processing function (a subtype of callback function)

const myButton = document.getElementById('myButton');

myButton.addEventListener('click', function handler() {
  console.log('我被点击啦!');
})
// 点击按钮时，才会打印'我被点击啦!'

4. Asynchronous callback function vs asynchronous function

Put The special keyword async before the function definition creates an asynchronous function:

async function fetchUserNames() {
  const resp = await fetch('https://api.github.com/users?per_page=5');
  const users = await resp.json();
  const names = users.map(({ login }) => login);
  console.log(names);
}

fetchUserNames() is asynchronous because it is prefixed with async. The function await fetch('https://api.github.com/users?per_page=5') retrieves the first 5 users from GitHub. Then extract the JSON data from the response object: await resp.json().

asyncFunction is the syntactic sugar of Promise. When the expression await <promise> is encountered (note that calling fetch() will return a promise), the asynchronous function will suspend execution until the promise be resolved.

Asynchronous callback function and asynchronous function are different terms.

Asynchronous callback functions are executed in a non-blocking manner by higher-order functions. But the asynchronous function pauses its execution while waiting for the promise (await <promise>) to resolve.

However, we can use asynchronous functions as asynchronous callbacks!

Our asynchronous functionfetchUserNames()Set to an asynchronous callback called when the button is clicked:

const button = document.getElementById('fetchUsersButton');

button.addEventListener('click', fetchUserNames);

Summary

The callback is a parameter that can be accepted A function that is executed by another function (higher-order function).

There are two kinds of callback functions: synchronous and asynchronous.

The synchronous callback function is executed at the same time as the higher-order function using the callback function, and the synchronous callback is blocking. On the other hand, asynchronous callbacks execute later than higher-order functions and are non-blocking.

Reprint address of this article: https://segmentfault.com/a/1190000041149520

For more programming related knowledge, please visit: Programming Video! !

The above is the detailed content of Let's talk about callback functions in JavaScript and distinguish between synchronous and asynchronous callbacks. For more information, please follow other related articles on the PHP Chinese website!