“This is the first day of my participation in the Gwen Challenge in November. Check out the details: The last Gwen Challenge in 2021”

Definition:

A function that is passed as an argument to another function and called inside that function to accomplish something is called a callback function

Simple explanation: Function A is passed as A parameter (function reference) to another function B, and this function B executes function A. Let’s say function A is called the callback function. If there is no name (function expression), it is called an anonymous callback function

function a(name) {
  console.log('hi ' + name);
}

function b(callback) {
  var name = prompt('Name information');
  callback(name);
}

b(console);
Copy the code

Function:

Since the browser’s main process is a single-threaded event loop, when the client’s JavaScript code is running in the browser, if we try to execute a time-running operation in the single-threaded event loop, the process will be blocked. Because the process stops processing other events while waiting for the operation to complete. In simple terms, when we execute a method or function, we call the callback function to prevent long operation or other operations.

Common callback functions

  1. Timer callback function
  2. Dom event callback function
  3. Ajax request callback function
  4. Lifecycle callback function

The relationship between callback functions and closures:

Closure: Function nested functions, inner functions can access the arguments and variables of outer functions

Both a callback function and a closure can pass a function as a variable to another function. A callback function can fetch variables in the function that contains it, as well as variables in the global scope. A callback function is essentially a closure

Disadvantages of callback functions

When executing asynchronous functions, multi-level accumulation of callback functions can easily lead to callback hell, affecting performance and visual experience

Solutions: Promise, async, await