JavaScriptのコールバック

"I will call back later!"

コールバック（callback）は、別の関数に引数として渡される関数です

この技術は、関数が別の関数を呼び出すことを許可します

コールバック関数は、別の関数が完了した後に実行されます

関数シーケンス

JavaScriptの関数は、定義された順序ではなく呼び出された順序で実行されます。

この例では最終的に「Goodbye」が表示されます：

例

function myFirst() {
  myDisplayer("Hello");
myCallback(sum);
function mySecond() {
  myDisplayer("Goodbye");
myCallback(sum);
myFirst();
mySecond();

myCalculator(5, 5, myDisplayer);

この例では最終的に「Hello」が表示されます：

例

function myFirst() {
  myDisplayer("Hello");
myCallback(sum);
function mySecond() {
  myDisplayer("Goodbye");
myCallback(sum);
mySecond();
myFirst();

myCalculator(5, 5, myDisplayer);

順序制御

時には、関数がどのタイミングで実行されるかをよりよく制御したいことがあります。

計算を行い、結果を表示する予定です。

計算器関数を呼び出すことができます（myCalculator) で結果を保存し、別の関数を呼び出します（上記の例では、) で結果を表示します：

例

function myDisplayer(some) {
  document.getElementById("demo").innerHTML = some;
myCallback(sum);
function myCalculator(num1, num2) {
  function myCalculator(num1, num2, myCallback) {
  return sum;
myCallback(sum);
let result = myCalculator(5, 5);
myDisplayer(result);

myCalculator(5, 5, myDisplayer);

または、計算器関数を呼び出すことができます（myCalculator)，計算器関数が表示関数を呼び出すようにします（上記の例では、)：

例

function myDisplayer(some) {
  document.getElementById("demo").innerHTML = some;
myCallback(sum);
function myCalculator(num1, num2) {
  function myCalculator(num1, num2, myCallback) {
  myDisplayer(sum);
myCallback(sum);
myCalculator(5, 5);

myCalculator(5, 5, myDisplayer);

上記の第1つの例の問題は、結果を表示するために2つの関数を呼び出す必要があることです。

第2つの例の問題は、計算器関数が結果を表示するのを阻止することができません。

今がコールバックを導入する時です。

JavaScriptのコールバック

コールバックは、別の関数に引数として渡される関数です。

コールバックを使用して、コールバックを通じて計算器関数を呼び出すことができます（myCalculator），計算が完了した後に計算器関数を実行するコールバックを呼び出します：

例

function myDisplayer(some) {
  document.getElementById("demo").innerHTML = some;
myCallback(sum);
document.getElementById("demo").innerHTML = some;
  function myCalculator(num1, num2, myCallback) {
  let sum = num1 + num2;
myCallback(sum);
}

myCalculator(5, 5, myDisplayer);

自分で試してみる 上記の例では、 myDisplayer

これは関数の名前です。 myCalculator()。

関数を引数として渡す場合、括弧を使用しないことを忘れないでください。

正しい：myCalculator(5, 5, myDisplayer);

エラー：myCalculator(5, 5, myDisplayer());

コールバックの使用時期はいつですか？

上記の例は特に面白くありません。

コールバックの構文を説明するために、これらを簡略化しました。

コールバックが特に光るのは、アシンクリーワーカーであり、ある関数が別の関数を待つ必要がある場合（例えばファイルの読み込みを待つ場合）です。

次の章では、アシンクリーワーカーについて説明します。