An in-depth analysis of callback functions in JavaScript

This article will give you an in-depth understanding of the callback function in JavaScript and introduce the difference between synchronous and asynchronous.

#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 callbacks

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

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 callbacks are 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, the execution delay of the later() 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

Asynchronous callback of timer function:

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

Special keyword placed before the function definitionasyncCreate 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 its prefix is ​​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 function fetchUserNames() is set to the asynchronous callback called when the button is clicked:

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

button.addEventListener('click', fetchUserNames);

Summary

Callback Is a function that can be accepted as a parameter and executed by another function (a 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.

Original English address: https://dmitripavlutin.com/javascript-variables-practices/

Author: Shadeed

More For programming-related knowledge, please visit: Introduction to Programming! !

The above is the detailed content of An in-depth analysis of callback functions in JavaScript. For more information, please follow other related articles on the PHP Chinese website!