Shulou(Shulou.com)06/02 Report--

Editor to share with you the JavaScript callback function and the distinction between synchronous and asynchronous callback example analysis, I believe that most people do not know much, so share this article for your reference, I hope you can learn a lot after reading this article, let's go to know it!

1. Callback function

Let's write a greeting function, first create a function greet (name), which returns a welcome message:

Function greet (name) {return `Hello, ${name}! `;} greet ('Hello'); / / = > 'Hello, Hsiao Zhi!'

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

Const persons = ['Xiaozhi', 'Wang Daye'] const messages = persons.map (greet) messages / / ["Hello, Xiaozhi!", "Hello, Wang Daye!"]

Persons.map (greet) accepts every item in the person array and uses each item as a call parameter to call the function greet (): greet ('Xiao Zhi'), greet ('Wang Daye').

Interestingly, the persons.map (greet) method accepts the greet () function as a parameter. Doing so makes reet () a callback function.

Persons.map (greet) is a function that takes another function as an argument, so it is named a higher-order function.

The higher-order function takes full responsibility for calling the callback function and provides it with the correct parameters.

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

We can write our own higher-order functions that use callbacks. For example, there is an equivalent 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 = ['Xiao Zhi', 'Wang Daye'] const messages = map (persons, greet); messages / / ["Hello, Xiao Zhi!", "Hello, Wang Daye!"]

Map (array, callback) is a high-order function because it takes a callback function as an argument, and then calls the callback function in its body: callback (item).

two。 Synchronous callback

Callbacks can be invoked in two ways: synchronous and asynchronous callbacks.

The synchronous callback is executed during execution using the high-order function of the callback.

In other words, the synchronous callback is in a blocking state: high-order functions wait until the callback completes its execution.

Function map (array, callback) {console.log ('map () start'); const mappedArray = []; for (const item of array) {mappedArray.push (callback (item))} console.log ('map () complete'); return mappedArray;} function greet (name) {console.log ('greet () called'); return `Hello, ${name}! `;} const persons = ['Mini']; map (persons, greet) / / map () start / / greet () is called / / map () completed

Greet () is a synchronous callback function because it executes concurrently with the higher-order function map ().

2.1 example of synchronous callback

Many native JavaScript-type methods use synchronous callbacks.

The most common are array methods, such as array.map (callback), array.forEach (callback), array.find (callback), array.filter (callback), array.reduce (callback, init):

Example of synchronous callback on / / array const persons = [function callback (name) {console.log (name);}); / / function callback (name) {return name [0] .toLowerCase () = 'small' }) / / nameStartingA / / const countStartingA = persons.reduce (function callback (count, name) {const startsA = name [0] .toLowerCase () = = 'small'; return startsA? Count + 1: count;}, 0); countStartingA / / 13. The asynchronous callback is executed after the execution of the higher-order function.

In short, asynchronous callbacks are non-blocking: higher-order functions do not have to wait for callbacks to complete their execution, and high-order functions ensure that callbacks are performed later on specific events.

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

Console.log ('setTimeout () start') setTimeout (function later () {console.log ('later () called')}, 2000) console.log ('setTimeout () complete') / / setTimeout () start / / setTimeout () complete / / later () is called (2 seconds later) 3.1 example of asynchronous callback

Asynchronous callback of timer function:

SetTimeout (function later () {console.log ('2 seconds have passed!);}, 2000); setInterval (function repeat () {console.log ('every 2 seconds');}, 2000)

DOM event listeners also call event handlers asynchronously (a subtype of callback functions).

Const myButton = document.getElementById ('myButton'); myButton.addEventListener (' click', function handler () {console.log ('I was clicked!);}) / / when the button is clicked, it prints'I'm clicked!'4. Asynchronous callback function vs asynchronous function

The special keyword async that precedes 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') from the top 5 users of GitHub. Then extract the JSON data from the response object: await resp.json ().

The async function is the syntactic sugar of Promise. When the expression await is encountered (note that a call to fetch () returns a promise), the asynchronous function suspends execution until the promise is resolved.

Asynchronous callback functions and asynchronous functions are different terms.

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

However, we can use asynchronous functions as asynchronous callbacks!

Our asynchronous function fetchUserNames () is set to the asynchronous callback that is called when the button is clicked:

Const button = document.getElementById ('fetchUsersButton'); button.addEventListener (' click', fetchUserNames); these are all the contents of this article entitled "callback functions in JavaScript and sample analysis of distinguishing between synchronous and asynchronous callbacks". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.