非同期JavaScript
「後で終わります！」
他の機能と並行して実行される機能は非同期と呼ばれます
良い例はJavaScriptsetTimeout（）です
非同期JavaScript
前の章で使用した例は、非常に単純化されています。
例の目的は、コールバック関数の構文を示すことでした。
例
function myDisplayer(something) {
document.getElementById("demo").innerHTML
= something;
}
function myCalculator(num1, num2, myCallback) {
let sum = num1 + num2;
myCallback(sum);
}
myCalculator(5, 5, myDisplayer);
上記の例でmyDisplayerは、は関数の名前です。
引数として渡されmyCalculator()ます。
現実の世界では、コールバックはほとんどの場合非同期関数で使用されます。
典型的な例はJavaScriptsetTimeout()です。
タイムアウトを待っています
JavaScript関数を使用する場合setTimeout()、タイムアウト時に実行されるコールバック関数を指定できます。
例
setTimeout(myFunction, 3000);
function myFunction() {
document.getElementById("demo").innerHTML = "I love You !!";
}
上記の例では、myFunctionはコールバックとして使用されます。
myFunction引数としてに渡されsetTimeout()ます。
3000はタイムアウトまでのミリ秒数であるため
myFunction()、3秒後に呼び出されます。
関数を引数として渡すときは、括弧を使用しないように注意してください。
右：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はタイムアウトまでのミリ秒数であるため
myFunction()、3秒後に呼び出されます。
間隔を待っています：
JavaScript関数を使用する場合setInterval()、間隔ごとに実行されるコールバック関数を指定できます。
例
setInterval(myFunction, 1000);
function myFunction() {
let d = new Date();
document.getElementById("demo").innerHTML=
d.getHours() + ":" +
d.getMinutes() + ":" +
d.getSeconds();
}
上記の例では、myFunctionはコールバックとして使用されます。
myFunction引数としてに渡されsetInterval()ます。
1000は間隔間のミリ秒数であるため、
myFunction()毎秒呼び出されます。
ファイルを待っています
外部リソース（スクリプトやファイルなど）をロードする関数を作成する場合、完全にロードされる前にコンテンツを使用することはできません。
これは、コールバックを使用するのに最適なタイミングです。
この例では、HTMLファイル（mycar.html）をロードし、ファイルが完全にロードされた後、Webページに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("Error: " + req.status);
}
}
req.send();
}
getFile(myDisplayer);
上記の例では、myDisplayerはコールバックとして使用されます。
myDisplayer引数としてに渡されgetFile()ます。
以下はのコピーですmycar.html：
mycar.html
<img src="img_car.jpg" alt="Nice car" style="width:100%">
<p>A car is a wheeled, self-powered motor vehicle used for transportation.
Most definitions of the term specify that cars are designed to run primarily on roads,
to have seating for one to eight people, to typically have four wheels.</p>
<p>(Wikipedia)</p>