Comment implémenter des rappels asynchrones JavaScript

JavaScript est un langage monothread, c'est-à-dire qu'il ne peut effectuer qu'une seule tâche à la fois. Cela signifie que dans certains cas, si nous appelons une fonction directement en JavaScript, ce qui peut prendre beaucoup de temps, la page se figera et ne répondra plus. Pour résoudre ce problème, nous devons utiliser des rappels asynchrones pour permettre à JavaScript de continuer à traiter d'autres transactions tout en exécutant des tâches à long terme.

Ici, nous présenterons comment utiliser les rappels asynchrones JavaScript et comment utiliser les rappels pour optimiser les performances JavaScript.

1. Qu'est-ce qu'un rappel asynchrone ?

Le rappel asynchrone fait référence au passage d'une autre fonction en tant que paramètre à la fonction qui exécute la tâche lors de l'exécution d'une tâche. Cette fonction sera appelée lorsque la tâche d'exécution sera terminée afin qu'elle puisse accepter les résultats renvoyés par la tâche d'exécution. Cette approche améliore les performances en permettant à JavaScript de continuer à traiter d'autres tâches pendant son exécution.

Par exemple, nous pouvons utiliser un rappel asynchrone pour récupérer les données du formulaire soumis par l'utilisateur sur le site :

function submitForm(form, callback) {
  // 验证表单数据、生成提交数据等操作
  var formData = generateFormData(form);

  // 发送Ajax请求
  sendRequest('POST', '/submit', formData, function(response) {
    callback(response);
  });
}

Dans l'exemple ci-dessus, la fonction submitForm() accepte un formulaire et une fonction callback comme paramètres. Une fois l'opération terminée, la fonction callback sera appelée afin qu'elle puisse accepter les résultats renvoyés en effectuant l'opération. Cela signifie que nous pouvons effectuer d'autres tâches lorsque le formulaire est soumis et ne pas appeler la fonction de rappel pour gérer les résultats jusqu'à ce que l'opération soit terminée et que les résultats soient renvoyés. submitForm()函数接受一个form参数和一个callback函数作为参数。当操作完成时，callback函数将被调用，以便它可以接受执行操作返回的结果。这意味着我们可以在提交表单时执行其他任务，直到操作完成并返回结果之后，才调用回调函数来处理结果。

2. 如何使用异步回调？

在JavaScript中，有多种方法可以使用异步回调。以下是其中的一些常见方法：

2.1. jQuery Deferred对象

jQuery提供了一种方便的方式来管理异步任务和它们的回调函数：Deferred对象。

Deferred对象是一个具有许多方法（如done()和fail()）的对象，这些方法允许我们定义异步任务的回调函数。当异步任务完成时，我们可以使用resolve()方法调用完成回调函数，或使用reject()方法调用失败回调函数。

例如，以下代码使用jQuery Deferred对象来加载图片：

function loadImage(url) {
  var defer = $.Deferred();
  var img = new Image();

  img.onload = function() {
    defer.resolve(img);
  };

  img.onerror = function() {
    defer.reject('Failed to load image at ' + url);
  };

  img.src = url;

  return defer.promise();
}

loadImage('http://example.com/image.jpg')
  .done(function(img) {
    console.log('Image loaded.', img);
  })
  .fail(function(error) {
    console.error(error);
  });

在上面的代码中，loadImage()函数通过一个Deferred对象来返回异步操作的结果。当操作完成时，如果成功，我们使用defer.resolve()方法调用完成回调函数done()，否则我们使用defer.reject()方法调用失败回调函数fail()。

2.2. Promise对象

Promise对象是ES6中新提出的一个概念，它允许我们对异步任务的完成状态进行处理。我们可以将异步任务封装在Promise对象中，并使用then()方法定义成功和失败的回调函数。

例如，以下代码使用Promise对象来加载图片：

function loadImage(url) {
  return new Promise(function(resolve, reject) {
    var img = new Image();

    img.onload = function() {
      resolve(img);
    };

    img.onerror = function() {
      reject('Failed to load image at ' + url);
    };

    img.src = url;
  });
}

loadImage('http://example.com/image.jpg')
  .then(function(img) {
    console.log('Image loaded.', img);
  })
  .catch(function(error) {
    console.error(error);
  });

在上面的代码中，loadImage()函数返回一个Promise对象，当异步操作完成时，我们使用resolve()方法调用成功回调函数then()，否则我们使用reject()方法调用失败回调函数catch()。

3. 如何优化代码？

虽然使用异步回调可以提高JavaScript的性能，但如果不正确使用，它可能会导致代码的混乱和可读性的降低。以下是一些使用异步回调时需要遵循的最佳实践：

3.1. 避免过多的回调嵌套

当我们使用多个异步回调时，我们可能会陷入回调地狱的困境中。为了避免这个问题，我们可以使用Promise对象或async/await语法来避免多层嵌套。

例如，以下代码使用async/await来加载图片：

async function loadImage(url) {
  return new Promise(function(resolve, reject) {
    var img = new Image();

    img.onload = function() {
      resolve(img);
    };

    img.onerror = function() {
      reject('Failed to load image at ' + url);
    };

    img.src = url;
  });
}

async function main() {
  try {
    var img = await loadImage('http://example.com/image.jpg');
    console.log('Image loaded.', img);
  } catch (error) {
    console.error(error);
  }
}

main();

在上面的代码中，我们使用async/await语法声明loadImage()函数和main()函数。使用await关键字，我们等待异步操作完成，并在操作完成后使用返回的结果。

3.2. 避免回调地狱

如果我们必须在多个异步任务之间传递参数，并避免回调嵌套，我们可以使用JavaScript的Promise和async/await语法来避免回调地狱。以下代码演示了这种方法：

async function multiply(x, y) {
  return x * y;
}

async function square(n) {
  return multiply(n, n);
}

async function cube(n) {
  var squareResult = await square(n);

  return multiply(squareResult, n);
}

async function main() {
  try {
    var result = await cube(3);
    console.log(result);
  } catch (error) {
    console.error(error);
  }
}

main();

在上面的代码中，我们使用async/await声明multiply()、square()和cube()函数。我们使用await

Comment utiliser le rappel asynchrone ?
4. En JavaScript, il existe plusieurs façons d'utiliser les rappels asynchrones. Voici quelques-unes des méthodes courantes :

2.1. Objet différé jQuery

🎜jQuery fournit un moyen pratique de gérer les tâches asynchrones et leurs fonctions de rappel : Objets différés. 🎜🎜Un objet Deferred est un objet avec de nombreuses méthodes (telles que done() et fail()) qui nous permettent de définir des fonctions de rappel pour les tâches asynchrones. Lorsque la tâche asynchrone est terminée, nous pouvons utiliser la méthode resolve() pour appeler la fonction de rappel d'achèvement, ou utiliser la méthode reject() pour appeler la fonction de rappel d'échec. 🎜🎜Par exemple, le code suivant utilise un objet jQuery Deferred pour charger une image : 🎜rrreee🎜Dans le code ci-dessus, la fonction loadImage() renvoie le résultat de l'opération asynchrone via un objet Deferred. Une fois l'opération terminée, si elle réussit, nous utilisons la méthode defer.resolve() pour appeler la fonction de rappel d'achèvement done(), sinon nous utilisons defer.reject ()Fonction de rappel d'échec d'appel de méthode <code>fail(). 🎜🎜2.2. Objet Promise 🎜🎜L'objet Promise est un concept nouvellement proposé dans ES6, qui nous permet de gérer l'état d'achèvement des tâches asynchrones. Nous pouvons encapsuler des tâches asynchrones dans des objets Promise et utiliser la méthode then() pour définir les fonctions de rappel de réussite et d'échec. 🎜🎜Par exemple, le code suivant utilise un objet Promise pour charger une image : 🎜rrreee🎜Dans le code ci-dessus, la fonction loadImage() renvoie un objet Promise, et lorsque l'opération asynchrone se termine, nous utiliser la méthode resolve () appelle la fonction de rappel de succès then(), sinon nous utilisons la méthode reject() pour appeler la fonction de rappel d'échec catch() . 🎜
🎜Comment optimiser le code ? 🎜🎜🎜Bien que l'utilisation de rappels asynchrones puisse améliorer les performances de JavaScript, si elle est mal utilisée, elle peut entraîner un code encombré et une lisibilité réduite. Voici quelques bonnes pratiques à suivre lors de l'utilisation de rappels asynchrones : 🎜🎜3.1. Évitez l'imbrication excessive des rappels 🎜🎜 Lorsque nous utilisons plusieurs rappels asynchrones, nous pouvons nous retrouver coincés dans l'enfer des rappels. Pour éviter ce problème, nous pouvons utiliser des objets Promise ou une syntaxe async/wait pour éviter plusieurs niveaux d'imbrication. 🎜🎜Par exemple, le code suivant utilise async/await pour charger des images : 🎜rrreee🎜Dans le code ci-dessus, nous utilisons la syntaxe async/await pour déclarer le loadImage() et la fonction main(). À l'aide du mot-clé await, nous attendons la fin de l'opération asynchrone et utilisons les résultats renvoyés une fois l'opération terminée. 🎜🎜3.2. Évitez l'enfer des rappels🎜🎜Si nous devons transmettre des paramètres entre plusieurs tâches asynchrones et éviter l'imbrication des rappels, nous pouvons utiliser la syntaxe Promise et async/wait de JavaScript pour éviter l'enfer des rappels. Le code suivant illustre cette approche : 🎜rrreee🎜Dans le code ci-dessus, nous déclarons multiply(), square() en utilisant async/await > et les fonctions cube(). Nous utilisons le mot-clé await pour transmettre des paramètres entre les fonctions. 🎜🎜🎜Résumé🎜🎜🎜Les rappels asynchrones sont un concept de programmation important en JavaScript. Il améliore les performances de JavaScript en nous permettant de continuer à travailler sur d'autres tâches tout en effectuant des opérations longues. L'utilisation de la syntaxe Promise et async/wait peut nous aider à éviter l'enfer des rappels et à améliorer la lisibilité du code. 🎜

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!