●setTimeoutを使った処理の遅延実行
JavaScriptで一定時間処理を待つ必要性がある場面は多々あります。
例えば、ユーザーの入力を待ってから次の処理を実行したい場合や、APIからのレスポンスを待ってからデータを表示したい場合などです。
こうした処理の待機を実現するための方法の1つが、setTimeoutを使った処理の遅延実行です。
setTimeoutは、指定した時間が経過した後に、指定したコールバック関数を実行するメソッドです。
これを使うことで、一定時間処理を待ってから次の処理を実行することができます。
それでは、setTimeoutの使い方について、具体的なサンプルコードを交えて解説していきましょう。
○サンプルコード1：setTimeoutの基本的な使い方
まずは、setTimeoutの基本的な使い方を見ていきます。
console.log("処理を開始します");
setTimeout(function() {
console.log("3秒経過しました");
}, 3000);
console.log("処理を終了します");実行結果
処理を開始します
処理を終了します
3秒経過しましたこのコードでは、まず “処理を開始します” というメッセージをコンソールに出力しています。
次に、setTimeoutを使って、3000ミリ秒（3秒）後に “3秒経過しました” というメッセージを出力するよう指定しています。
最後に、”処理を終了します” というメッセージを出力しています。
実行結果を見ると、”処理を開始します” と “処理を終了します” が先に出力され、3秒後に “3秒経過しました” が出力されていることがわかります。
このように、setTimeoutを使うことで、指定した時間だけ処理を遅延させることができるのです。
○サンプルコード2：setTimeoutとコールバック関数
先ほどのコードでは、setTimeoutの第一引数に、直接関数を記述していました。
しかし、コールバック関数を別途定義し、それをsetTimeoutに渡すこともできます。
function greet(name) {
console.log(`こんにちは、${name}さん！`);
}
setTimeout(function() {
greet("太郎");
}, 2000);
setTimeout(function() {
greet("花子");
}, 3000);実行結果
こんにちは、太郎さん！
こんにちは、花子さん！このコードでは、greet関数を定義し、それをsetTimeoutのコールバック関数から呼び出しています。
1つ目のsetTimeoutでは2秒後に “太郎” さんに、2つ目のsetTimeoutでは3秒後に “花子” さんにあいさつするよう指定しています。
実行結果を見ると、2秒後に “こんにちは、太郎さん！”、その1秒後に “こんにちは、花子さん！” と出力されていることがわかります。
このように、setTimeoutとコールバック関数を組み合わせることで、より柔軟な処理の遅延が可能になります。
○サンプルコード3：setTimeoutを使った一定時間後の処理
次に、setTimeoutを使って一定時間後に処理を実行する例を見ていきましょう。
console.log("5秒後にアラートを表示します");
setTimeout(function() {
alert("5秒経過しました！");
console.log("アラートを閉じました");
}, 5000);実行結果
5秒後にアラートを表示します
（5秒後にアラートが表示される）
アラートを閉じましたこのコードでは、まず “5秒後にアラートを表示します” というメッセージをコンソールに出力しています。
次に、setTimeoutを使って5秒後にアラートを表示し、アラートを閉じたら “アラートを閉じました” というメッセージを出力するよう指定しています。
実行結果を見ると、最初に “5秒後にアラートを表示します” が出力され、5秒後にアラートが表示されます。
アラートを閉じると、”アラートを閉じました” が出力されます。
このように、setTimeoutを使えば、一定時間後に任意の処理を実行させることができるのです。
●setIntervalを使った一定間隔での処理実行
setTimeoutが一定時間後に処理を実行するのに対し、setIntervalは一定時間ごとに処理を繰り返し実行するメソッドです。
定期的にデータを取得したり、アニメーションを実現したりする際に便利ですね。
setIntervalの使い方は、setTimeoutとよく似ています。
第一引数にコールバック関数を指定し、第二引数に処理を繰り返す間隔をミリ秒単位で指定します。
では早速、具体的なサンプルコードを見ていきましょう。
○サンプルコード4：setIntervalの基本的な使い方
まずは、setIntervalの基本的な使い方から見ていきます。
console.log("カウントを開始します");
let count = 0;
const intervalId = setInterval(function() {
count++;
console.log(`${count}秒経過`);
if (count === 5) {
clearInterval(intervalId);
console.log("カウントを終了します");
}
}, 1000);実行結果
カウントを開始します
1秒経過
2秒経過
3秒経過
4秒経過
5秒経過
カウントを終了しますこのコードでは、setIntervalを使って1秒ごとにカウントアップし、コンソールにメッセージを出力しています。
count変数を宣言し、setIntervalのコールバック関数内でカウントアップしています。
また、clearIntervalを使って、カウントが5になったらsetIntervalを停止するようにしています。
clearIntervalは、setIntervalを停止するためのメソッドで、引数にはsetIntervalの戻り値であるintervalIdを指定します。
実行結果を見ると、1秒ごとにカウントアップし、5秒経過後にカウントが終了していることがわかります。
このように、setIntervalを使えば、一定間隔で処理を繰り返すことができるのです。
○サンプルコード5：setIntervalのクリア
次に、setIntervalをクリアする方法を詳しく見ていきましょう。
先ほどのコードでも登場したclearIntervalは、setIntervalを途中で停止するために使用します。
let count = 0;
const intervalId = setInterval(function() {
count++;
console.log(`${count}秒経過`);
}, 1000);
setTimeout(function() {
clearInterval(intervalId);
console.log("カウントを終了します");
}, 5000);実行結果
1秒経過
2秒経過
3秒経過
4秒経過
5秒経過
カウントを終了しますこのコードでは、setIntervalを使って1秒ごとにカウントアップしつつ、setTimeoutを使って5秒後にclearIntervalを呼び出しています。
実行結果を見ると、5秒間はカウントアップが継続し、5秒経過後にカウントが終了していることがわかります。
このように、clearIntervalを使えば、setIntervalを任意のタイミングで停止させることができます。
ただし、clearIntervalを呼び出すタイミングに注意が必要です。
setIntervalのコールバック関数内で、条件を満たした時点でclearIntervalを呼び出さないと、処理が終了しない可能性があります。
setIntervalは、一定間隔で処理を繰り返すために非常に便利なメソッドです。
ただ、無限ループに陥らないよう、適切なタイミングでclearIntervalを呼び出すことが大切ですね。
また、短い間隔でsetIntervalを実行すると、ブラウザに負荷がかかる可能性があるので注意が必要です。
●Promiseを使った処理の待機
JavaScriptでの非同期処理といえば、コールバック関数を使うのが一般的でした。
しかし、コールバック関数を多用すると、いわゆる「コールバック地獄」に陥ってしまい、コードの読みやすさが損なわれてしまいます。
そんな中、ES2015でPromiseが導入され、非同期処理の記述がより簡潔で読みやすくなりました。
Promiseは、非同期処理の状態を表すオブジェクトです。
非同期処理が完了したときに、成功（resolve）または失敗（reject）のどちらかの状態になります。
Promiseを使えば、非同期処理の結果を分かりやすく扱うことができるのです。
それでは、Promiseの使い方について、具体的なサンプルコードを見ていきましょう。
○サンプルコード6：Promiseの基本的な使い方
まずは、Promiseの基本的な使い方から見ていきます。
const promise = new Promise((resolve, reject) => {
setTimeout(() => {
resolve("処理が成功しました");
}, 1000);
});
promise.then((result) => {
console.log(result);
}).catch((error) => {
console.error(error);
});実行結果
処理が成功しましたこのコードでは、Promiseオブジェクトを生成し、1秒後にresolveを呼び出しています。
Promiseオブジェクトのthenメソッドで、resolveされた値を受け取り、コンソールに出力しています。
Promiseコンストラクタには、executer関数を渡します。
executer関数の第一引数はresolve、第二引数はrejectで、非同期処理が成功したときにresolveを、失敗したときにrejectを呼び出します。
thenメソッドは、Promiseが成功したときに呼び出されるコールバック関数を登録します。
catchメソッドは、Promiseが失敗したときに呼び出されるコールバック関数を登録します。
実行結果を見ると、1秒後に「処理が成功しました」とコンソールに出力されていることがわかります。
このように、Promiseを使えば、非同期処理の結果を簡潔に扱うことができるのです。
○サンプルコード7：Promiseを使った一定時間の待機
次に、Promiseを使って一定時間の待機を行う方法を見ていきましょう。
function sleep(ms) {
return new Promise(resolve => setTimeout(resolve, ms));
}
console.log("処理を開始します");
sleep(2000).then(() => {
console.log("2秒経過しました");
});実行結果
処理を開始します
2秒経過しましたこのコードでは、sleep関数を定義し、Promiseを使って一定時間の待機を行っています。
sleep関数は、引数で指定されたミリ秒だけ待機するPromiseを返します。
sleep関数を呼び出した後、thenメソッドで、待機が完了した後に実行する処理を記述しています。
この例では、2秒待機した後、「2秒経過しました」とコンソールに出力しています。
実行結果を見ると、「処理を開始します」が出力された2秒後に、「2秒経過しました」が出力されていることがわかります。
このように、Promiseを使えば、一定時間の待機を簡潔に記述できます。
○サンプルコード8：Promise.allを使った複数の処理の待機
最後に、Promise.allを使って複数の非同期処理の完了を待つ方法を見ていきましょう。
function task1() {
return new Promise(resolve => {
setTimeout(() => {
console.log("タスク1が完了しました");
resolve(1);
}, 1000);
});
}
function task2() {
return new Promise(resolve => {
setTimeout(() => {
console.log("タスク2が完了しました");
resolve(2);
}, 2000);
});
}
Promise.all([task1(), task2()]).then(([result1, result2]) => {
console.log(`両方のタスクが完了しました。結果: ${result1}, ${result2}`);
});実行結果
タスク1が完了しました
タスク2が完了しました
両方のタスクが完了しました。結果: 1, 2このコードでは、task1関数とtask2関数を定義し、それぞれ1秒後と2秒後に完了するPromiseを返しています。
Promise.allに、task1関数とtask2関数が返すPromiseの配列を渡しています。
Promise.allは、渡された全てのPromiseが完了するまで待機し、全ての結果を配列で返します。
thenメソッドで、両方のタスクが完了した後に実行する処理を記述しています。
この例では、両方のタスクの結果をコンソールに出力しています。
実行結果を見ると、1秒後に「タスク1が完了しました」、2秒後に「タスク2が完了しました」と出力され、その後に「両方のタスクが完了しました。結果: 1, 2」と出力されていることがわかります。
このように、Promise.allを使えば、複数の非同期処理の完了を簡潔に待つことができます。
●async/awaitを使った非同期処理の同期的な記述
これまで見てきたように、JavaScriptでの非同期処理は、コールバック関数やPromiseを使って記述できます。
しかし、コールバック関数では複雑なネストが発生し、Promiseでも長いチェーンが読みづらくなることがあります。
そこで登場したのが、async/awaitです。
async/awaitは、ES2017で導入された構文で、Promiseをより同期的に記述できるようにするものです。
async関数の中でawait式を使うことで、Promiseの完了を待ち、結果を変数に代入することができます。
これにより、非同期処理を同期処理のように記述できるのです。
async/awaitを使えば、非同期処理のコードがより読みやすくなり、理解しやすくなります。
特に、複数の非同期処理を順番に実行する場合に、その威力を発揮します。
それでは、async/awaitの使い方について、具体的なサンプルコードを見ていきましょう。
○サンプルコード9：async/awaitの基本的な使い方
まずは、async/awaitの基本的な使い方から見ていきます。
function wait(ms) {
return new Promise(resolve => setTimeout(resolve, ms));
}
async function asyncFunction() {
console.log("非同期処理を開始します");
await wait(1000);
console.log("1秒経過しました");
await wait(2000);
console.log("さらに2秒経過しました");
return "非同期処理が完了しました";
}
asyncFunction().then(result => {
console.log(result);
});実行結果
非同期処理を開始します
1秒経過しました
さらに2秒経過しました
非同期処理が完了しましたこのコードでは、wait関数を定義し、指定されたミリ秒だけ待機するPromiseを返しています。
asyncFunction関数は、async関数として定義されています。
async関数の中では、await式を使ってPromiseの完了を待つことができます。
asyncFunction関数の中では、まず「非同期処理を開始します」とコンソールに出力しています。
次に、await wait(1000)で1秒待機し、「1秒経過しました」と出力しています。
さらに、await wait(2000)で2秒待機し、「さらに2秒経過しました」と出力しています。
最後に、「非同期処理が完了しました」という文字列を返しています。
asyncFunction関数を呼び出すと、Promiseが返されます。
そのPromiseに対してthenメソッドを呼び出し、非同期処理の結果をコンソールに出力しています。
実行結果を見ると、「非同期処理を開始します」が出力された後、1秒後に「1秒経過しました」、さらに2秒後に「さらに2秒経過しました」と出力されています。
最後に、「非同期処理が完了しました」が出力されています。
○サンプルコード10：async/awaitとsetTimeoutの組み合わせ
次に、async/awaitとsetTimeoutを組み合わせた例を見ていきましょう。
function wait(ms) {
return new Promise(resolve => setTimeout(resolve, ms));
}
async function countDown(seconds) {
for (let i = seconds; i > 0; i--) {
console.log(i);
await wait(1000);
}
console.log("カウントダウン終了！");
}
countDown(5);実行結果
5
4
3
2
1
カウントダウン終了！このコードでは、countDown関数を定義し、指定された秒数からカウントダウンを行っています。
countDown関数の中では、forループを使って、指定された秒数から1ずつ減らしながらカウントダウンしています。
各ループの中で、現在の数字をコンソールに出力し、await wait(1000)で1秒待機しています。
これにより、1秒ごとにカウントダウンが行われます。
ループが終了すると、「カウントダウン終了！」とコンソールに出力されます。
実行結果を見ると、5から始まり、1秒ごとに数字が減っていき、最後に「カウントダウン終了！」と出力されていることがわかります。
●よくあるエラーと対処法
JavaScriptでの非同期処理は、より効率的で応答性の高いWebアプリケーションを開発するために欠かせません。
しかし、非同期処理を扱う際には、いくつかの落とし穴があります。
初心者の方なら、一度は頭を悩ませたことがあるのではないでしょうか。
ここでは、JavaScriptの非同期処理でよく出くわすエラーと、その対処法について見ていきます。
これらのエラーを理解し、適切に対処できるようになることで、より安定したコードを書けるようになるでしょう。
○setTimeoutやsetIntervalが動作しない場合
まずは、setTimeoutやsetIntervalが期待通りに動作しない場合の対処法です。
よくある原因は、待機時間に0を指定してしまうことです。
setTimeout(function() {
console.log("この処理は実行されない");
}, 0);このコードでは、setTimeoutの待機時間に0を指定しています。
しかし、待機時間に0を指定しても、すぐにコールバック関数が実行されるわけではありません。
正確には、現在の処理が完了した後、可能な限り早くコールバック関数が実行されます。
そのため、次のような場合に、setTimeoutやsetIntervalが期待通りに動作しないことがあります。
console.log("処理1");
setTimeout(function() {
console.log("処理2");
}, 0);
for (let i = 0; i < 1000000000; i++) {
// 重い処理
}
console.log("処理3");実行結果
処理1
処理3
処理2このコードでは、「処理1」が出力された後、setTimeoutで「処理2」を0秒後に実行するよう指定しています。
しかし、その直後に重い処理のループが実行されるため、「処理2」は「処理3」の後に出力されています。
このように、setTimeoutやsetIntervalは、JavaScriptのイベントループに依存しています。
現在の処理が終わるまで、コールバック関数の実行は遅延されるのです。
対処法としては、重い処理を避けるか、重い処理を別のタイミングで実行するようにしましょう。
また、setTimeoutやsetIntervalの待機時間には、適切な値を指定するようにしてください。
○Promiseのエラーハンドリング
次に、Promiseのエラーハンドリングについて見ていきます。
Promiseを使った非同期処理では、エラーが発生した場合に適切に対処することが重要です。
function fetchData() {
return new Promise((resolve, reject) => {
// データを取得する処理
// エラーが発生した場合は reject を呼び出す
reject(new Error("データの取得に失敗しました"));
});
}
fetchData()
.then(data => {
console.log(data);
})
.catch(error => {
console.error("エラーが発生しました:", error);
});実行結果
エラーが発生しました: Error: データの取得に失敗しましたこのコードでは、fetchData関数内でエラーが発生した場合に、rejectを呼び出してエラーをキャッチしています。
そして、catchメソッドで、エラーが発生した場合の処理を記述しています。
Promiseを使う際は、必ずcatchメソッドを使ってエラーをキャッチするようにしましょう。
そうすることで、エラーが発生した場合でも適切に対処することができます。
また、Promiseチェーンが長くなる場合は、チェーンの最後でcatchメソッドを呼び出すだけでなく、途中の段階でもエラーをキャッチすることを検討してください。
そうすることで、エラーが発生した場所を特定しやすくなります。
○async/awaitでの例外処理
最後に、async/awaitを使った非同期処理での例外処理について見ていきます。
async/awaitを使う場合は、try…catch文を使って例外をキャッチすることができます。
async function fetchData() {
throw new Error("データの取得に失敗しました");
}
async function main() {
try {
const data = await fetchData();
console.log(data);
} catch (error) {
console.error("エラーが発生しました:", error);
}
}
main();実行結果：
エラーが発生しました: Error: データの取得に失敗しましたこのコードでは、fetchData関数内で例外をスローしています。
main関数内では、try…catch文を使って例外をキャッチし、エラーメッセージをコンソールに出力しています。
async/awaitを使う場合は、try…catch文を使って例外処理を行うようにしましょう。
そうすることで、エラーが発生した場合でも適切に対処することができます。
また、複数のawait式がある場合は、それぞれの式をtry…catch文で囲むことを検討してください。
そうすることで、エラーが発生した場所を特定しやすくなります。
●応用例
これまで、JavaScriptでの処理の待機や遅延実行について、setTimeout、setInterval、Promise、async/awaitを使った様々な方法を見てきました。
この知識を活用することで、より実践的なWebアプリケーションを開発することができるでしょう。
ここでは、JavaScriptでの処理待ちを応用した実践的なテクニックを、具体的なサンプルコードとともに紹介します。
この応用例を通して、非同期処理の活用方法を深く理解し、より洗練されたWebアプリケーションの開発に役立ててください。
○サンプルコード11：ボタンクリック後に一定時間処理を遅らせる
まずは、ボタンクリック後に一定時間処理を遅らせる例から見ていきましょう。
これは、ユーザーのクリックを受け付けた後、すぐに処理を実行するのではなく、一定時間待ってから処理を実行する場合に役立ちます。
<button id="myButton">クリックしてください</button>const button = document.getElementById("myButton");
button.addEventListener("click", function() {
button.disabled = true;
button.textContent = "処理中...";
setTimeout(function() {
// 一定時間後に実行する処理
console.log("処理が完了しました");
button.disabled = false;
button.textContent = "クリックしてください";
}, 2000);
});実行結果
（ボタンをクリック）
処理中...
（2秒後）
処理が完了しましたこのコードでは、ボタンをクリックすると、ボタンが無効化され、テキストが「処理中…」に変更されます。
そして、setTimeout内で一定時間（この例では2秒）後に処理が実行されます。
処理が完了すると、ボタンが再び有効化され、テキストが元に戻ります。
このように、setTimeoutを使うことで、ボタンクリック後に一定時間処理を遅らせることができます。
これは、時間のかかる処理を実行する際に、ユーザーにその間の状態を適切に伝えるのに役立ちます。
○サンプルコード12：一時停止と再開の機能を実装する
次に、一時停止と再開の機能を実装する例を見ていきましょう。
これは、ゲームやアニメーションなどで、一時的に処理を停止し、再開する機能を実装する場合に役立ちます。
let count = 0;
let isPaused = false;
let intervalId;
function start() {
if (!isPaused) {
intervalId = setInterval(function() {
count++;
console.log(count);
}, 1000);
}
}
function pause() {
clearInterval(intervalId);
isPaused = true;
}
function resume() {
isPaused = false;
start();
}
start();
setTimeout(function() {
pause();
console.log("一時停止しました");
}, 5000);
setTimeout(function() {
resume();
console.log("再開しました");
}, 8000);実行結果
1
2
3
4
5
一時停止しました
（3秒後）
再開しました
6
7
...このコードでは、start関数でカウントアップを開始し、pause関数で一時停止、resume関数で再開しています。
isPaused変数を使って、現在の状態を管理しています。
最初にstart関数を呼び出し、カウントアップを開始します。
5秒後にpause関数が呼び出され、カウントアップが一時停止します。
そして、8秒後にresume関数が呼び出され、カウントアップが再開します。
このように、setIntervalとclearIntervalを組み合わせることで、一時停止と再開の機能を実装することができます。
これは、ゲームやアニメーションなどで、ユーザーの操作に応じて処理を制御する場合に役立ちます。
○サンプルコード13：非同期処理の連続実行
次に、非同期処理を連続して実行する例を見ていきましょう。
これは、複数の非同期処理を順番に実行し、全ての処理が完了した後に最終的な結果を得る場合に役立ちます。
async function fetchData(url) {
const response = await fetch(url);
return await response.json();
}
async function main() {
try {
const data1 = await fetchData("https://api.example.com/data1");
console.log(data1);
const data2 = await fetchData("https://api.example.com/data2");
console.log(data2);
const data3 = await fetchData("https://api.example.com/data3");
console.log(data3);
console.log("全ての処理が完了しました");
} catch (error) {
console.error("エラーが発生しました:", error);
}
}
main();実行結果：
（data1の内容）
（data2の内容）
（data3の内容）
全ての処理が完了しましたこのコードでは、fetchData関数を定義し、指定されたURLからデータを取得する非同期処理を行っています。
main関数内で、fetchData関数を順番に呼び出し、それぞれの結果をコンソールに出力しています。
async/awaitを使うことで、非同期処理を同期的に記述できるため、処理の流れが理解しやすくなります。
また、try…catch文を使ってエラーハンドリングを行っています。
このように、async/awaitを使えば、複数の非同期処理を順番に実行し、全ての処理が完了した後に最終的な結果を得ることができます。
これは、APIからデータを取得するなど、複数の非同期処理を組み合わせる場合に役立ちます。
○サンプルコード14：一定時間ごとにサーバーにデータを送信する
次に、一定時間ごとにサーバーにデータを送信する例を見ていきましょう。
これは、ユーザーの操作履歴やアプリケーションの状態を定期的にサーバーに送信する場合に役立ちます。
function sendData(data) {
return new Promise((resolve, reject) => {
// サーバーにデータを送信する処理
// 成功したらresolve、失敗したらrejectを呼び出す
// ここでは、3秒後に成功するものとします
setTimeout(() => {
console.log("データを送信しました:", data);
resolve();
}, 3000);
});
}
async function main() {
let count = 0;
setInterval(async function() {
count++;
const data = { count: count };
try {
await sendData(data);
} catch (error) {
console.error("データの送信に失敗しました:", error);
}
}, 5000);
}
main();実行結果
（5秒後）
データを送信しました: {count: 1}
（10秒後）
データを送信しました: {count: 2}
（15秒後）
データを送信しました: {count: 3}
...このコードでは、sendData関数を定義し、サーバーにデータを送信する非同期処理を行っています。
main関数内で、setIntervalを使って一定時間（この例では5秒）ごとにsendData関数を呼び出しています。
sendData関数内では、Promiseを使って非同期処理を行っています。
この例では、3秒後に成功するものとしていますが、実際にはサーバーとの通信が行われます。
setInterval内でasync/awaitを使うことで、非同期処理を同期的に記述できるため、処理の流れが理解しやすくなります。
また、try…catch文を使ってエラーハンドリングを行っています。
このように、setIntervalとasync/awaitを組み合わせることで、一定時間ごとにサーバーにデータを送信することができます。
これは、ユーザーの操作履歴やアプリケーションの状態を定期的にサーバーに送信する場合に役立ちます。
○サンプルコード15：アニメーションの遅延実行
最後に、アニメーションの遅延実行の例を見ていきましょう。
これは、要素の位置や色などを徐々に変化させ、アニメーション効果を実現する場合に役立ちます。
<div id="box"></div>#box {
width: 100px;
height: 100px;
background-color: blue;
position: absolute;
left: 0;
top: 0;
transition: all 0.5s;
}const box = document.getElementById("box");
let position = 0;
function animate() {
position += 10;
box.style.left = `${position}px`;
if (position < 200) {
setTimeout(animate, 50);
}
}
animate();実行結果
（ブラウザ上で青い四角形が右に移動するアニメーションが表示される）このコードでは、HTMLとCSSを使って青い四角形を表示し、JavaScriptを使ってアニメーションを実装しています。
animate関数内で、position変数を更新し、box要素のleftプロパティを変更することで、四角形の位置を移動させています。
transitionプロパティを使うことで、滑らかなアニメーション効果を実現しています。
setTimeoutを使って、animate関数を再帰的に呼び出すことで、アニメーションを継続的に実行しています。
position変数が200未満の間、50ミリ秒（0.05秒）ごとにanimate関数が呼び出されます。
このように、setTimeoutを使ってアニメーションの遅延実行を行うことで、要素の位置や色などを徐々に変化させ、アニメーション効果を実現することができます。
これは、Webページ上でビジュアルな効果を追加する場合に役立ちます。
まとめ
JavaScriptでの処理待ちは、setTimeout、setInterval、Promise、async/awaitを使って実現できます。
このメソッドや構文を適切に使い分けることで、一定時間後に処理を実行したり、一定間隔で処理を繰り返したり、非同期処理を同期的に記述したりできます。
また、処理待ちを応用することで、ボタンクリック後の遅延処理、一時停止と再開の機能、非同期処理の連続実行、定期的なデータ送信、アニメーションの遅延実行など、様々な実践的なテクニックが実現できます。
エラーハンドリングにも気を付けながら、これらの手法を活用し、より洗練されたWebアプリケーションを開発していきましょう。
JavaScriptでの非同期処理や処理待ちをマスターすることで、ユーザーを惹きつける魅力的なWebアプリケーションを作ることができるでしょう。
