Eine eingehende Analyse von Callback-Funktionen in JavaScript

Dieser Artikel vermittelt Ihnen ein detailliertes Verständnis der Rückruffunktion in JavaScript und stellt den Unterschied zwischen synchron und asynchron vor.

Die Callback-Funktion ist eines der Konzepte, die jeder JS-Entwickler kennen sollte. Rückrufe werden in Arrays, Timer-Funktionen, Versprechen, Event-Handlern usw. verwendet.

In diesem Artikel wird das Konzept der Rückruffunktion erläutert. Darüber hinaus hilft es Smartmi dabei, zwischen zwei Arten von Rückrufen zu unterscheiden: synchrone und asynchrone.

1. Rückruffunktion

Wir schreiben zunächst eine Funktion greet(name), die die Willkommensnachricht zurückgibt: greet(name)，该函数返回欢迎消息：

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

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

如果要向一些人问候怎么做？这里，我们可以使用 array.map() 方法：

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

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

persons.map(greet)接受person数组的每一项，并使用每一项作为调用参数来调用函数greet()：greet('小智')，greet('王大冶')。

有趣的是persons.map(greet)方法接受greet()函数作为参数。 这样做会使reet()成为回调函数。

persons.map(greet)是一个接受另一个函数作为参数的函数，因此将其命名为高阶函数。

高阶函数承担调用回调函数的全部责任，并为其提供正确的参数。

在前面的示例中，高阶函数persons.map(greet)负责调用greet()回调函数，并将数组的每个项目作为参数：'小智'和'王大冶'。

我们可以可以自己编写使用回调的高阶函数。例如，这里有一个等价的array.map()方法

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)是一个高阶函数，因为它接受回调函数作为参数，然后在它的函数体内部调用回调函数:callback(item)。

2.同步回调

回调的调用方式有两种：同步和异步回调。

同步回调是在使用回调的高阶函数执行期间执行的。

换句话说，同步回调处于阻塞状态：高阶函数要等到回调完成执行后才能完成其执行。

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()是一个同步回调函数，因为它与高阶函数map()同时执行。

2.1 同步回调的例子

很多原生 JavaScript 类型的方法都使用同步回调。

最常用的是数组方法，例如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.异步回调

异步回调在执行高阶函数之后执行。

简而言之，异步回调是非阻塞的：高阶函数无需等待回调即可完成其执行，高阶函数可确保稍后在特定事件上执行回调。

在下面的示例中，later()函数的执行延迟为2秒

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

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

3.1 异步回调的示例

计时器函数的异步回调：

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

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

DOM 事件监听器也是异步调用事件处理函数(回调函数的一种子类型)

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

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

4. 异步回调函数 vs 异步函数

放在函数定义之前的特殊关键字async创建一个异步函数：

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()是异步的，因为它的前缀是async。 该函数await fetch('https://api.github.com/users?per_page=5')从 GitHub 前5个用户。 然后从响应对象中提取 JSON 数据：await resp.json()。

async函数是 Promise 的语法糖。 当遇到表达式await <promise>时（注意，调用fetch()将返回一个 promise），异步函数将暂停执行直到该promise得以解决。

异步回调函数和异步函数是不同的术语。

异步回调函数由高阶函数以非阻塞方式执行。 但是异步函数在等待promise（await <promise>）解析时暂停其执行。

但是，我们可以将异步函数用作异步回调！

我们异步函数fetchUserNames()

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

button.addEventListener('click', fetchUserNames);

rrreeepersons.map(greet) akzeptiert jedes Element des Arrays person Und verwenden Sie jedes Element als Aufrufparameter, um die Funktion greet() aufzurufen: greet('Xiao Zhi'), greet('Wang Daye') code>.

🎜2. Synchrone Rückrufe 🎜🎜🎜Es gibt zwei Möglichkeiten, Rückrufe aufzurufen: synchrone und asynchrone Rückrufe. 🎜

Synchronisierte Rückrufe werden während der Ausführung von Funktionen höherer Ordnung ausgeführt, die Rückrufe verwenden.

🎜Mit anderen Worten, der synchrone Rückruf befindet sich in einem blockierenden Zustand: Die Funktion höherer Ordnung kann ihre Ausführung erst abschließen, wenn die Ausführung des Rückrufs abgeschlossen ist. 🎜rrreee🎜greet() ist eine synchrone Callback-Funktion, da sie gleichzeitig mit der übergeordneten Funktion map() ausgeführt wird. 🎜

🎜2.1 Beispiele für synchrone Rückrufe🎜

🎜3 Rückruf🎜 🎜

Asynchrone Rückrufe werden nach der Ausführung von Funktionen höherer Ordnung ausgeführt.

🎜Kurz gesagt, asynchrone Rückrufe sind nicht blockierend: Eine Funktion höherer Ordnung muss nicht auf einen Rückruf warten, um ihre Ausführung abzuschließen, und eine Funktion höherer Ordnung stellt sicher, dass der Rückruf später bei einem bestimmten Ereignis ausgeführt wird . 🎜🎜Im folgenden Beispiel beträgt die Ausführungsverzögerung der Funktion later() 2 Sekunden rrreee🎜DOM-Ereignis-Listener rufen auch asynchron Ereignisverarbeitungsfunktionen auf (ein Untertyp von Rückruffunktionen)🎜rrreee

🎜4. Asynchrone Rückruffunktionen im Vergleich zu asynchronen Funktionen🎜🎜🎜 vor der Funktionsdefinition platziert Das Besondere Das Schlüsselwort async erstellt eine asynchrone Funktion: 🎜rrreee🎜fetchUserNames() ist asynchron, da ihm async vorangestellt ist. Die Funktion await fetch('https://api.github.com/users?per_page=5') ruft die ersten 5 Benutzer von GitHub ab. Extrahieren Sie dann die JSON-Daten aus dem Antwortobjekt: await resp.json(). 🎜🎜Die Funktion async ist syntaktischer Zucker für Promise. Wenn der Ausdruck await <promise> angetroffen wird (beachten Sie, dass der Aufruf von fetch() ein Versprechen zurückgibt), unterbricht die asynchrone Funktion die Ausführung bis zum promise ist aufgelöst. 🎜🎜🎜Asynchrone Rückruffunktion und asynchrone Funktion sind unterschiedliche Begriffe. 🎜🎜🎜Asynchrone Callback-Funktionen werden von Funktionen höherer Ordnung nicht blockierend ausgeführt. Die asynchrone Funktion unterbricht jedoch ihre Ausführung, während sie auf die Auflösung des Versprechens (await <promise>) wartet. 🎜🎜Allerdings können wir asynchrone Funktionen als asynchrone Rückrufe verwenden! 🎜🎜Unsere asynchrone Funktion fetchUserNames() ist auf einen asynchronen Callback eingestellt, der aufgerufen wird, wenn auf die Schaltfläche geklickt wird: 🎜rrreee🎜🎜 Zusammenfassung 🎜🎜🎜Ein Callback ist eine Funktion, die als Parameter akzeptiert werden kann und von einer anderen Funktion (Funktion höherer Ordnung) übergeben 🎜🎜Es gibt zwei Arten von Rückruffunktionen: synchrone und asynchrone. 🎜🎜Die synchrone Rückruffunktion wird gleichzeitig mit der Funktion höherer Ordnung ausgeführt, die die Rückruffunktion verwendet, und der synchrone Rückruf blockiert. Andererseits werden asynchrone Rückrufe später ausgeführt als Funktionen höherer Ordnung und blockieren nicht. 🎜

Englische Originaladresse: https://dmitripavlutin.com/javascript-variables-practices/

Autor: Shadeed

Weitere Programmierkenntnisse finden Sie unter: Einführung in die Programmierung! !

Das obige ist der detaillierte Inhalt vonEine eingehende Analyse von Callback-Funktionen in JavaScript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!