【保存版】JavaScriptで非同期処理をスムーズに扱う！コールバック関数、Promise、async/await徹底解説

JavaScript & jQueryで前の関数が完了後に別の関数を呼び出す方法

コールバック関数:

最も基本的な方法は、コールバック関数を使うことです。コールバック関数は、別の関数の引数として渡され、その関数が完了した後に呼び出される関数です。

function firstFunction(callback) {
  // 前の処理
  console.log("前の処理を実行中...");

  // 非同期処理の例
  setTimeout(() => {
    console.log("非同期処理完了");
    callback(); // 完了後にコールバック関数を呼び出す
  }, 1000);
}

function secondFunction() {
  console.log("次の処理を実行中...");
}

firstFunction(secondFunction); // firstFunctionの実行後にsecondFunctionを呼び出す

メリット:

• シンプルで分かりやすい
• さまざまな状況で使える

• ネストが深くなりやすい
• コードが冗長になりやすい

Promise:

非同期処理を扱う場合は、Promiseを使うのが一般的です。Promiseは、非同期処理の結果を扱うためのオブジェクトです。

function firstFunction() {
  return new Promise((resolve, reject) => {
    // 非同期処理の例
    setTimeout(() => {
      console.log("非同期処理完了");
      resolve(); // 完了時にresolveを呼び出す
    }, 1000);
  });
}

firstFunction()
  .then(() => secondFunction()) // 完了後にsecondFunctionを呼び出す
  .catch(error => console.error(error));

• コードが読みやすく、メンテナンスしやすい
• エラー処理が容易

• コールバック関数よりもやや複雑

jQuery Deferred:

jQueryを使用している場合は、Deferredオブジェクトを使うことができます。Deferredオブジェクトは、Promiseと似たような機能を提供します。

$(document).ready(function() {
  var deferred = $.Deferred();

  firstFunction(deferred);

  deferred.done(function() {
    secondFunction();
  });
});

function firstFunction(deferred) {
  // 非同期処理の例
  setTimeout(() => {
    console.log("非同期処理完了");
    deferred.resolve(); // 完了時にresolveを呼び出す
  }, 1000);
}

function secondFunction() {
  console.log("次の処理を実行中...");
}

• jQueryを使用している場合に便利
• Promiseとほぼ同じように使える

async/await:

ES2017以降では、async/await構文を使って非同期処理をより簡単に記述することができます。

async function main() {
  await firstFunction();
  secondFunction();
}

main();

async function firstFunction() {
  // 非同期処理の例
  await new Promise((resolve, reject) => {
    setTimeout(() => {
      console.log("非同期処理完了");
      resolve();
    }, 1000);
  });
}

function secondFunction() {
  console.log("次の処理を実行中...");
}

• コードが最も簡潔で読みやすい
• 非同期処理を同期処理のように記述できる

• ES2017以降のブラウザが必要

状況に応じて適切な方法を選択することが重要です。

• シンプルで分かりやすいコードを求める場合は、コールバック関数がおすすめです。
• 非同期処理を扱う場合は、Promiseまたはasync/awaitがおすすめです。
• jQueryを使用している場合は、jQuery Deferredも選択肢の一つです。

上記以外にも、イベントリスナーやObserver APIなどを利用する方法もあります。

具体的な状況や目的に合わせて、最適な方法を選択してください。

コールバック関数

function firstFunction(callback) {
  console.log("前の処理を実行中...");
  setTimeout(() => {
    console.log("非同期処理完了");
    callback();
  }, 1000);
}

function secondFunction() {
  console.log("次の処理を実行中...");
}

firstFunction(secondFunction);

Promise

function firstFunction() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      console.log("非同期処理完了");
      resolve();
    }, 1000);
  });
}

firstFunction()
  .then(() => secondFunction())
  .catch(error => console.error(error));

jQuery Deferred

$(document).ready(function() {
  var deferred = $.Deferred();

  firstFunction(deferred);

  deferred.done(function() {
    secondFunction();
  });
});

function firstFunction(deferred) {
  setTimeout(() => {
    console.log("非同期処理完了");
    deferred.resolve();
  }, 1000);
}

function secondFunction() {
  console.log("次の処理を実行中...");
}

async/await

async function main() {
  await firstFunction();
  secondFunction();
}

main();

async function firstFunction() {
  await new Promise((resolve, reject) => {
    setTimeout(() => {
      console.log("非同期処理完了");
      resolve();
    }, 1000);
  });
}

function secondFunction() {
  console.log("次の処理を実行中...");
}

説明:

• 上記のコードは、いずれもfirstFunctionが完了した後にsecondFunctionを呼び出すという同じ処理を実行します。
• 各方法の特徴は、前述の説明を参照してください。

補足:

• これらのサンプルコードはあくまでも基本的な例です。実際の状況に合わせて、適宜カスタマイズする必要があります。
• 非同期処理の具体的な内容は、状況によって異なります。

JavaScript & jQueryで前の関数が完了後に別の関数を呼び出す方法：その他の方法

イベントリスナー:

DOMイベントやカスタムイベントを利用して、関数を呼び出すことができます。

$('#button').click(function() {
  firstFunction();
});

function firstFunction() {
  // 処理
  $(document).trigger('firstFunctionCompleted'); // イベントを発行
}

$(document).on('firstFunctionCompleted', function() {
  secondFunction();
});

function secondFunction() {
  // 処理
}

• 柔軟性が高い

• イベントハンドラが増えると、コードが煩雑になりやすい

Observer API:

MutationObserverやIntersectionObserverなどのAPIを利用して、要素の変化を監視し、関数を呼び出すことができます。

const observer = new MutationObserver(function(mutations) {
  for (const mutation of mutations) {
    if (mutation.type === 'childList') {
      firstFunction();
    }
  }
});

observer.observe($('#target'), { childList: true });

function firstFunction() {
  // 処理
  secondFunction();
}

function secondFunction() {
  // 処理
}

• コードが簡潔に書ける
• 再利用しやすい

• ブラウザサポートが限定的

setTimeout:

単純な非同期処理であれば、setTimeout関数を利用して、一定時間後に別の関数を呼び出すことができます。

function firstFunction() {
  // 処理
  setTimeout(secondFunction, 1000);
}

function secondFunction() {
  // 処理
}

• 非同期処理の詳細な制御が難しい