setIntervalの基本
JavaScriptには、特定の間隔で関数を繰り返し実行するための組み込み関数setInterval()があります。この関数は、指定した間隔（ミリ秒）ごとに特定の関数またはコードスニペットを実行します。
以下に、setInterval()の基本的な使用方法を示します。
let intervalID = setInterval(myFunction, 3000);
function myFunction() {
// ここに繰り返し実行したいコードを書く
}
この例では、myFunctionが3秒（3000ミリ秒）ごとに実行されます。setInterval()は、タイマーを識別するための一意のIDを返します。このIDは、後でclearInterval()関数を使用してタイマーを停止するために使用できます。
clearInterval(intervalID);
これがsetInterval()の基本的な使い方です。次のセクションでは、複数のタイマーをどのように管理するかについて説明します。
複数のタイマーの同時実行
JavaScriptのsetInterval()を使用して複数のタイマーを同時に実行することも可能です。それぞれのsetInterval()は独立して動作し、それぞれが異なる間隔で関数を実行します。
以下に、複数のタイマーを同時に実行する例を示します。
let intervalID1 = setInterval(function1, 3000);
let intervalID2 = setInterval(function2, 5000);
function function1() {
// 3秒ごとに実行されるコード
}
function function2() {
// 5秒ごとに実行されるコード
}
この例では、function1は3秒ごとに、function2は5秒ごとに実行されます。それぞれのタイマーは独立しているため、一方を停止しても他方に影響はありません。
clearInterval(intervalID1); // function1のタイマーを停止
これにより、複数のタイマーを同時に管理することが可能になります。次のセクションでは、これらのタイマーをどのように制御し、必要に応じて停止するかについて説明します。
タイマーの制御と停止
JavaScriptのsetInterval()で作成したタイマーは、clearInterval()関数を使用していつでも停止することができます。clearInterval()関数には、停止したいタイマーのIDを引数として渡します。
以下に、タイマーの制御と停止の例を示します。
let intervalID = setInterval(myFunction, 3000);
function myFunction() {
// 3秒ごとに実行されるコード
}
// タイマーを停止する
clearInterval(intervalID);
この例では、myFunctionが3秒ごとに実行されるタイマーを作成し、その後でタイマーを停止しています。
また、特定の条件が満たされたときにタイマーを停止することも可能です。例えば、特定の回数だけ関数を実行した後でタイマーを停止することができます。
let count = 0;
let intervalID = setInterval(function() {
count++;
console.log(count);
// 5回実行したらタイマーを停止
if (count >= 5) {
clearInterval(intervalID);
}
}, 1000);
この例では、1秒ごとにカウントを増やし、カウントが5になったときにタイマーを停止しています。
これらの方法を用いて、JavaScriptのsetInterval()で作成したタイマーを効果的に制御し、必要に応じて停止することができます。次のセクションでは、これらの知識を応用した実例について説明します。
実例と応用
JavaScriptのsetInterval()を用いた複数のタイマーの管理は、様々な場面で応用することができます。例えば、ウェブページ上で複数のアニメーションを同時に制御したり、異なる間隔でデータをフェッチしたりする場合などです。
以下に、複数のタイマーを用いた実例を示します。
let count1 = 0;
let count2 = 0;
let intervalID1 = setInterval(function() {
count1++;
console.log(`タイマー1: ${count1}回目の実行`);
if (count1 >= 5) {
clearInterval(intervalID1);
console.log('タイマー1を停止');
}
}, 1000);
let intervalID2 = setInterval(function() {
count2++;
console.log(`タイマー2: ${count2}回目の実行`);
if (count2 >= 8) {
clearInterval(intervalID2);
console.log('タイマー2を停止');
}
}, 500);
この例では、2つのタイマーがそれぞれ異なる間隔で実行され、特定の回数実行された後で自動的に停止します。タイマー1は1秒ごとに実行され、5回実行された後で停止します。一方、タイマー2は0.5秒ごとに実行され、8回実行された後で停止します。
このように、JavaScriptのsetInterval()を用いて複数のタイマーを同時に制御することで、複雑なタスクを効率的に管理することが可能になります。これらの知識を活用して、さまざまなシナリオでのタイマーの管理をマスターしましょう。