【JavaScript】async/awaitを使って関数を繰り返し実行する方法
JavaScriptでは、async キーワードと await 演算子を組み合わせることで、非同期処理を含む関数を繰り返し実行できます。以下に具体的なコード例を紹介します。
コード例
async function test(i) {
while (i <= 10) {
await demo(" Call Demo1()");
await demo(" Call Demo2()");
i++;
}
}
async function demo(value){
console.log(value);
}
test(1);このコードのポイントは以下の通りです。
test関数はasyncとして宣言されており、内部でawaitを使用できます。whileループの中でdemo()を呼び出すたびにawaitを付けることで、前の処理が完了してから次の処理が実行されます。- ループ変数
iの値に応じて、Demo1() と Demo2() の呼び出しが10回繰り返されます。
プログラムの実行方法
上記のプログラムを実行するには、Node.js環境で次のコマンドを使用します。
node fileName.js
ここでは、ファイル名を demo73.js として保存した場合の実行例を示します。
出力結果
プログラムを実行すると、以下のような出力が得られます。
PS C:\Users\Amit\JavaScript-code> node demo73.js Call Demo1() Call Demo2() Call Demo1() Call Demo2() Call Demo1() Call Demo2() Call Demo1() Call Demo2() Call Demo1() Call Demo2() Call Demo1() Call Demo2() Call Demo1() Call Demo2() Call Demo1() Call Demo2() Call Demo1() Call Demo2() Call Demo1() Call Demo2()
このように、async/await を使えば、Promiseベースの非同期処理でも同期的な書き味で直感的に繰り返し処理を記述できます。コールバック地獄や複雑な Promise チェーンを避けたい場合に特に有効な手法です。
-
JavaScriptのcall()とapply()で関数を呼び出す方法をわかりやすく解説
JavaScriptには、関数の呼び方を柔軟に制御できるメソッドとして call() と apply() が用意されています。どちらも「this」の値を指定しながら関数を実行できる点は共通していますが、引数の渡し方が異なります。 call() と apply() の違い call(): 引数を個別の値(カンマ区切り)として渡します。 apply(): 引数を配列(または配列風オブジェクト)として一括で渡します。 それでは、実際に両方のメソッドを使って関数を呼び出すサンプルコードを見てみましょう。 サンプルコード <!DOCTYPE html> <html lang=ja>
-
【JavaScript】onclickイベントで2つ以上の関数を実行する方法
JavaScriptでonclickイベントを使ってボタンをクリックした際に、2つ以上の関数を同時に実行したいケースはよくあります。最もシンプルな方法は、呼び出し用の関数(ラッパー関数)を1つ作成し、その中で実行したい複数の関数を順番に呼び出すことです。 手順1:ボタンを設置する まず、HTMLにボタンを配置します。このボタンのonclick属性には、複数の関数を呼び出すための関数を指定します。 <button type=submit onclick=callTwoOtherFunctions()> 呼び出す </button> 手順2:ラッパー関数を作成する 上記のボ