タイマー処理を行うsetTimeout()と一定時間の繰り返しを行うsetInterval()

みなさまどうもこんにちは。

続きまして『setTimeout()』と『setInterval()』について解説していきたいと思います。

こちらは時間差で処理を実行させたり、時間ごとの繰り返し処理を構築することができる関数(メソッド)になります。早速使い方をみていきましょう。

まずは時間差を設けて処理を実行させることができる『setTimeout()』です。読み方は「せっとたいむあうと」でOKです。

記述例はこんな感じになります。

function hoge(){
    alert("3秒経ちました！");
}
setTimeout(hoge, 3000);

これを実行させると3秒後に関数『hoge』が実行され、アラートダイアログが表示されます。

記述方法は、まず『setTimeout();』と記述します。これが基本となる関数(メソッド)ですね。問題は引数です。

『setTimeout()』の最初の引数には関数オブジェクトを指定する必要があるので実行したい関数の名前を記述しましょう。

注意点として『()』をつけてはダメです。『setTimeout(hoge(), 3000);』としてしまうと、関数『hoge』が実行されてしまい『undefined』が返ってきてしまいます。
※これについては先の記事で解説します。

なので『()』を付けずに定義した関数の名前をそのまま記述してください。

続いて第二引数には遅延させたい時間をミリ秒で指定します。ミリ秒なので1秒送らせたかったら『1000』と記述すればOKです。

続いて、指定された時間ごとに処理を実行できる『setInterval()』の解説です。読み方は「せっといんたーばる」です。

こちらはこんな感じで記述します。

function hoge(){
    console.log("3秒経ちました！");
}
setInterval(hoge, 3000);

これを実行すると3秒ごとにコンソールに文字列が出力されます。

注意点として上記のサンプルは止まりません。なので終了させたかったらブラウザを更新するか、閉じちゃってください。ずっと動き続けます。

記述方法は『setTimeout()』とほとんど同じですね。第一引数に関数オブジェクト、第二引数に繰り返しをさせたい時間をミリ秒で指定してください。

さて、この『setInterval()』はそのまま書くと先ほどのサンプルのように止まりません。止まらない処理を構築したい場合は問題ないのですが、処理を止めたいといった場合もあるかと思います。

そんな悩めるあなたのために『clearInterval()』という関数(メソッド)が用意されています。読み方は「くりあーいんたーばる」です。

これを使うと『setInterval()』の繰り返し処理を停止することができるのですがちょっと記述方法にクセがあります。以下のサンプルをみてみましょう。

function hoge(){
    console.log("3秒経ちました！");
}

var setIV = setInterval(hoge, 3000);

function stop_hoge(){
    clearInterval(setIV);
    console.log("停止しました！");
}

setTimeout(stop_hoge, 5000);

これを実行すると5000ミリ秒後(5秒後)に『setInterval(hoge, 3000);』が停止するのですがなんだかよく分からない感じになっていますね。

まず関数『hoge』を定義しているところまでは問題ないかと思いますが次の行の『var setIV = setInterval(hoge, 3000);』というところが不思議な感じがするかと思います。

これは『setInterval()』の戻り値を変数『setIV』に代入している記述です。戻り値とは関数を実行したときにその関数から戻される値のことで、以下のような記述で戻り値を変数に代入させることができます。
※戻り値は先の記事で詳しく解説します。

var 変数名 = 関数名();

関数が実行されて戻る値を取得する、というわけなので『()』を記述し関数を実行させる必要があるのを忘れないようにしてください。

ではなぜ戻り値を代入しているのかというと、『clearInterval()』の引数に『setInterval()』の戻り値を渡す必要があるからです。

もし『setInterval()』の戻り値をどこにも代入しなかった場合は処理を停止できません。

function hoge(){
    console.log("3秒経ちました！");
}
setInterval(hoge, 3000); // 戻り値を保存していないのでこの『setInterval()』は停止することができません。

なので『setInterval()』の処理を停止したい場合は必ず戻り値をどこかに保存しておく必要がありますので注意です。

ということを踏まえて先ほどの処理を再度確認してみましょう。関数『stop_hoge』の中に『clearInterval(setIV);』という記述がありますね。この変数『setIV』の中に『setInterval(hoge, 3000);』の戻り値が代入されているので『clearInterval(setIV);』とすると『setInterval(hoge, 3000);』の処理を停止することができています。

あとは『setTimeout(stop_hoge, 5000);』とすることで5000ミリ秒後に関数『stop_hoge』が実行されるという流れになりますね。

setTimeout(function(){
	// ここに処理
}, 3000);

setInterval(function(){
	// ここに処理
}, 5000);

『setTimeout()』と『setInterval()』の大まかな使い方は以上となります。続いての記事では『return文』について解説していきたいと思います。

引き続き頑張っていきましょう。ではー。

この記事は桜舞が執筆致しました。

著者が愛する小型哺乳類

桜舞 春人 Sakurama Haruto ISDN時代から様々なコンテンツを制作しているちょっと髪の毛が心配な東京在住のプログラマー。生粋のロングスリーパーで、10時間以上睡眠を取らないと基本的に体調が悪い。好きなだけ寝れる生活を送るのが夢。ゲームとスポーツと音楽が大好き。誰か髪の毛を分けて下さい。

記事の間違いや著作権の侵害等ございましたらお手数ですがこちらまでご連絡頂ければ幸いです。

トップページへ

前の記事へ

次の記事へ

Tweet

シェア