So implementieren Sie asynchrone JavaScript-Rückrufe-Front-End-Fragen und Antworten-php.cn

JavaScript ist eine Single-Threaded-Sprache, das heißt, sie kann jeweils nur eine Aufgabe ausführen. Das bedeutet, dass die Seite in manchen Fällen einfriert und nicht mehr reagiert, wenn wir eine Funktion direkt in JavaScript aufrufen, was viel Zeit in Anspruch nehmen kann. Um dieses Problem zu lösen, müssen wir asynchrone Rückrufe verwenden, damit JavaScript weiterhin andere Transaktionen verarbeiten und gleichzeitig langfristige Aufgaben ausführen kann.

Hier stellen wir vor, wie man asynchrone JavaScript-Rückrufe verwendet und wie man Rückrufe zur Optimierung der JavaScript-Leistung verwendet.

Was ist ein asynchroner Rückruf?

Asynchroner Rückruf bezieht sich auf die Übergabe einer anderen Funktion als Parameter an die Funktion, die die Aufgabe ausführt, wenn eine Aufgabe ausgeführt wird. Diese Funktion wird aufgerufen, wenn die Ausführungsaufgabe abgeschlossen ist, damit sie die von der Ausführungsaufgabe zurückgegebenen Ergebnisse akzeptieren kann. Dieser Ansatz verbessert die Leistung, indem er es JavaScript ermöglicht, während der Ausführung weiterhin andere Aufgaben zu verarbeiten.

Zum Beispiel können wir asynchrone Rückrufe verwenden, um von Benutzern auf der Website übermittelte Formulardaten abzurufen:

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

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

Nach dem Login kopieren

Im obigen Beispiel submitForm()</code >Die Funktion akzeptiert einen <code>form-Parameter und eine callback-Funktion als Parameter. Wenn der Vorgang abgeschlossen ist, wird die Funktion callback aufgerufen, damit sie die durch die Ausführung des Vorgangs zurückgegebenen Ergebnisse akzeptieren kann. Dies bedeutet, dass wir beim Absenden des Formulars andere Aufgaben ausführen können und die Rückruffunktion zur Verarbeitung der Ergebnisse nicht aufrufen müssen, bis der Vorgang abgeschlossen ist und die Ergebnisse zurückgegeben werden. submitForm()函数接受一个form参数和一个callback函数作为参数。当操作完成时，callback函数将被调用，以便它可以接受执行操作返回的结果。这意味着我们可以在提交表单时执行其他任务，直到操作完成并返回结果之后，才调用回调函数来处理结果。

如何使用异步回调？

在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);
  });

Nach dem Login kopieren

在上面的代码中，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);
  });

Nach dem Login kopieren

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

如何优化代码？

虽然使用异步回调可以提高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();

Nach dem Login kopieren

在上面的代码中，我们使用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();

Nach dem Login kopieren

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

In JavaScript gibt es mehrere Möglichkeiten, asynchrone Rückrufe zu verwenden. Hier sind einige der gängigen Methoden:

2.1. jQuery Deferred Object

done()

fail()

resolve()

reject()

loadImage()

defer.resolve()

done()

defer.reject ()Methodenaufruf fehlgeschlagen, Rückruffunktion <code>fail()

Promise

then()

loadImage()

resolve()

then()

reject ()

catch()

async/await

main()

await

async/await

multiply()

als Quadrat zu deklarieren ()

cube()

await

Das obige ist der detaillierte Inhalt vonSo implementieren Sie asynchrone JavaScript-Rückrufe. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!