タイマーとインターバルの使い方 – JavaScriptで始めるプログラミング

タイマーの使い方

まず、タイマーの使い方について説明します。タイマーは指定した時間が経過した後、一度だけ関数を実行します。

• setTimeout: 一定時間後に一度だけ関数を実行する

setTimeout(function() {
    alert('タイマーが完了しました!');
}, 2000);

このコードでは、2秒後にアラートが表示されます。

インターバルの使い方

次に、インターバルの使い方を見ていきます。インターバルは一定間隔で関数を繰り返し実行します。

• setInterval: 一定間隔で関数を繰り返し実行する

setInterval(function() {
    console.log('1秒経過');
}, 1000);

このコードでは、1秒ごとにコンソールにメッセージが出力されます。

タイマーとインターバルのキャンセル

さらに、タイマーやインターバルを停止する方法も重要です。これにはclearTimeoutやclearIntervalが使われます。

例えば、以下のようにタイマーをキャンセルできます:

var timerId = setTimeout(function() {
    alert('タイマーが完了しました!');
}, 2000);
clearTimeout(timerId);

また、インターバルのキャンセル方法は次の通りです:

var intervalId = setInterval(function() {
    console.log('1秒経過');
}, 1000);
clearInterval(intervalId);

実用的な例

タイマーとインターバルを組み合わせることで、さらに複雑な動きをプログラムに取り入れることができます。

例えば、カウントダウンタイマーを作成する場合、まずタイマーを設定して残り時間を表示し、終了時にアクションを行うことができます。

プログラミングの実践例

次のコードはカウントダウンタイマーの簡単な例です:

var count = 10;
var countdown = setInterval(function() {
    if (count <= 0) {
        clearInterval(countdown);
        alert('カウントダウン完了!');
    } else {
        console.log(count + '秒残り');
        count--;
    }
}, 1000);

まとめ

このように、JavaScriptのタイマーとインターバルは非常に有用な機能であり、適切に使うことでプログラムの幅を広げることができます。MDNのドキュメント(外部リンク)などを参考にして、さらに深く学んでみてください。

これからも新しいプログラミングのテクニックを学んで、より高度なスキルを身につけていきましょう。