TECH I.S.

非同期JavaScript

「後で終わらせます！」

実行中の関数他の関数が呼び出されます。
他の関数と並行して実行される関数は非同期と呼ばれます。

良い例はJavaScriptのsetTimeout()です。

非同期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()引数として渡されます。

現実の世界では、コールバックは非同期関数で最もよく使用されます。
典型的な例はJavaScriptのsetTimeout()です。

タイムアウト待ち

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()毎秒呼び出されます。

コールバックの代替手段

非同期プログラミングを使用すると、JavaScriptプログラムは実行時間の長いタスクを開始し、他のタスクを並行して実行し続けることができます。

ただし、非同期プログラムは作成が難しく、デバッグも困難です。

このため、最新の非同期JavaScriptメソッドのほとんどはコールバックを使用しません。代わりに、JavaScriptでは、Promise を使用して非同期プログラミングを解決します。

ノート

Promiseについては、このチュートリアルの次の章で学習します。


チュートリアル