アスペクトのJavaScript

"I will finish later!"

他の関数と並行して実行される関数は非同期（asynchronous）と呼ばれます。

JavaScript setTimeout()が良い例です。

非同期 JavaScript

前章で使用された例は大幅に簡略化されています。

これはコールバック関数の構文を示す目的です：

例

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

自分で試してみてください

上記の例では、myDisplayer それは関数の名前です。

それは引数として渡されます。 myCalculator()。

現実世界では、コールバックは非同期関数と一緒に最もよく使用されます。

典型的な例は JavaScript setTimeout()。

待機超時

JavaScript 関数を使用する場合、 setTimeout() 時、超時時に実行されるコールバック関数を指定できます：

例

setTimeout(myFunction, 3000);
function myFunction() {
  document.getElementById("demo").innerHTML = "I love You !!";
}

自分で試してみてください

上記の例では、myFunction コールバックとして使用されます。

関数（関数名）を引数として渡します setTimeout()。

3000 はタイムアウト前のミリ秒数ですので、3 秒後に呼び出されます。 myFunction()。

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

正しい：setTimeout(myFunction, 3000);

エラー：setTimeout(myFunction(), 3000);

関数の名前を引数として他の関数に渡さない場合、常に全体の関数を渡すことができます：

例

setTimeout(function() { myFunction("I love You !!!"); }, 3000);
function myFunction(value) {}}
  document.getElementById("demo").innerHTML = value;
}

自分で試してみてください

上記の例では、function(){ myFunction("I love You !!!"); } コールバックとして使用されます。これは完全な関数です。完全な関数は setTimeout() に引数として渡されます。

3000 はタイムアウト前のミリ秒数ですので、3 秒後に呼び出されます。 myFunction()。

待機間隔：

JavaScript 関数を使用する場合、 setInterval() の間隔ごとに実行するコールバック関数を指定できます：

例

setInterval(myFunction, 1000);
function myFunction() {
  let d = new Date();
  document.getElementById("demo").innerHTML=
  d.getHours() + ":" +
  d.getMinutes() + ":" +
  d.getSeconds();
}

自分で試してみてください

上記の例では、myFunction コールバックとして使用します。

関数（関数名）を引数として渡します setInterval()。

1000 は間隔のミリ秒数ですので、 myFunction() 毎秒一度呼び出します。

ファイルの読み込みを待つ

外部リソース（スクリプトやファイルなど）をロードする関数を作成した場合、内容が完全に読み込まれる前にその内容を使用することができません。

これはコールバックを使用する最適なタイミングです。

この例では、HTML ファイルをロードしています（mycar.html)、ファイルが完全に読み込まれた後、HTML ファイルをウェブページで表示する：

ファイルの読み込みを待つ：

function myDisplayer(some) {
  document.getElementById("demo").innerHTML = some;
}
function getFile(myCallback) {
  let req = new XMLHttpRequest();
  req.open('GET', "mycar.html");
  req.onload = function() {
    if (req.status == 200) {
      myCallback(this.responseText);
    } else {
      myCallback("エラー: " + req.status);
    }
  }
  req.send();
}
getFile(myDisplayer);

自分で試してみてください

上記の例では、myDisplayer コールバックとして使用します。

関数（関数名）を引数として渡します getFile()。

以下に示します mycar.html のコピー：

mycar.html

<img src="img_car.jpg" alt="Nice car" style="width:100%">
<p>車は、交通手段に使用される、車輪を持ち、自己駆動するモーターユニットです。</p>
<p>この用語のほとんどの定義では、車は主に道路で走行するように設計されており、1人から8人までの乗員を収容し、通常4つの車輪を持っています。</p>
<p>(ウィキペディア)</p>