JavaScript 非同期コールバックを実装する方法

JavaScript はシングルスレッド言語です。つまり、一度に 1 つのタスクしか実行できません。つまり、場合によっては、長時間かかる可能性のある関数を JavaScript で直接呼び出すと、ページがフリーズして応答しなくなります。この問題を解決するには、非同期コールバックを使用して、JavaScript が長期タスクを実行しながら他のトランザクションの処理を継続できるようにする必要があります。

ここでは、JavaScript の非同期コールバックの使用方法と、コールバックを使用して JavaScript のパフォーマンスを最適化する方法を紹介します。

1. 非同期コールバックとは何ですか?

非同期コールバックとは、タスクの実行時に、タスクを実行する関数にパラメータとして別の関数を渡すことを指します。この関数は、実行タスクが完了したときに呼び出され、実行タスクによって返された結果を受け入れることができます。このアプローチでは、JavaScript の実行中に他のタスクの処理を継続できるため、パフォーマンスが向上します。

たとえば、非同期コールバックを使用して、Web サイト上でユーザーが送信したフォーム データを取得できます。

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

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

上の例では、submitForm()関数は form パラメータと callback 関数をパラメータとして受け入れます。操作が完了すると、callback 関数が呼び出され、操作の実行から返された結果を受け入れることができます。これは、フォームの送信時に他のタスクを実行でき、操作が完了して結果が返されるまで結果を処理するコールバック関数を呼び出す必要がないことを意味します。

2. 非同期コールバックを使用するにはどうすればよいですか?

JavaScript では、非同期コールバックを使用する方法が複数あります。一般的なメソッドの一部を次に示します:

2.1. jQuery 遅延オブジェクト

jQuery は、非同期タスクとそのコールバック関数 (遅延オブジェクト) を管理する便利な方法を提供します。

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() 関数は非同期操作を返します。遅延オブジェクトの結果。操作が完了すると、成功した場合は 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() 。

コードを最適化するにはどうすればよいですか?

非同期コールバックを使用すると 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 構文ステートメントを使用します。 () 関数と 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 キーワードを使用して関数間でパラメーターを渡します。 概要

4. 非同期コールバックは、JavaScript における重要なプログラミング概念です。これにより、長時間の操作を実行しながら他のタスクの作業を継続できるため、JavaScript のパフォーマンスが向上します。 Promise と async/await 構文を使用すると、コールバック地獄を回避し、コードの可読性を向上させることができます。

以上がJavaScript 非同期コールバックを実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。