シェアする
setTimeout() and setInterval() for Timer Operations - Japanese Only
みなさまどうもこんにちは。
続きまして『setTimeout()』と『setInterval()』について解説していきたいと思います。
こちらは時間差で処理を実行させたり、時間ごとの繰り返し処理を構築することができる関数(メソッド)になります。早速使い方をみていきましょう。
まずは時間差を設けて処理を実行させることができる『setTimeout()』です。読み方は「せっとたいむあうと」でOKです。
記述例はこんな感じになります。
function hoge(){
alert("3秒経ちました！");
}
setTimeout(hoge, 3000);
これを実行させると3秒後に関数『hoge』が実行され、アラートダイアログが表示されます。
記述方法は、まず『setTimeout();』と記述します。これが基本となる関数(メソッド)ですね。問題は引数です。
『setTimeout()』の最初の引数には関数オブジェクトを指定する必要があるので実行したい関数の名前を記述しましょう。
関数オブジェクトとはこれまで勉強してきた関数(メソッド)のことだと思って頂いて問題ありません。JavaScriptでは『プリミティブ値』という根本となる値以外は全てオブジェクトである、という定義になっています。なので関数も一種のオブジェクトになり関数オブジェクトと呼ばれることがあります。
※プリミティブ値についてはこちらの記事で詳しく解説をしています。
注意点として『()』をつけてはダメです。『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()』と『setInterval()』は『無名関数』というものを使うと関数定義なしで処理を実行させることができます。
以下のサンプルをみてみましょう。
setTimeout(function(){
// ここに処理
}, 3000);
setInterval(function(){
// ここに処理
}, 5000);
関数オブジェクトの部分が『function(){}』に置き換わっているのが確認できると思います。この『function(){}』が無名関数と呼ばれる部分になります。
無名関数とはJavaScript特有の記法で、その名の通り名前がない関数になります。なので後から呼び出したりはできないのですが、関数を定義する必要がない1回きりの処理を書きたい場合などによく使われる記法です。
※無名関数については先の記事で詳しく解説します。
『setTimeout()』と『setInterval()』の大まかな使い方は以上となります。続いての記事では『return文』について解説していきたいと思います。
引き続き頑張っていきましょう。ではー。
This article was written by Sakurama.
Author's beloved small mammal |
桜舞 春人 Sakurama HarutoA Tokyo-based programmer who has been creating various content since the ISDN era, with a bit of concern about his hair. A true long sleeper who generally feels unwell without at least 10 hours of sleep. His dream is to live a life where he can sleep as much as he wants. Loves games, sports, and music. Please share some hair with him. |
If you find any errors or copyright issues, please contact us.
