setInterval()を使ってcanvasで作成した図形を動かしたかったのですが、いきなりやるには難易度が高かったのでsetInterval()について勉強したいと思います。
setInterval()とは
setInterval()は一定の間隔で処理を実行したいときに使われる関数です。
setInterval()構文
setInterval(function, milliseconds, param1, param2, …)
・functionには基本的には呼び出したい関数が入ります。setInterval(function(){ alert(“Hello”); }, 3000)のようにfunctionを()内に書き入れることもできます。
・millisecondsには処理したい間隔のミリ秒を設定します。
※「1000」で1秒です。
・param1, param2,… はオプションなので書かなくても問題ありません。
関数に渡す追加のパラメータを書けます。（IE9以前はサポートしていません）
functionには基本的には呼び出したい関数と書きましたが、より詳しく書くと関数以外も記述可能です。
英語ではevaluates an expressionと書かれていましたが、いい感じの日本語にできないので関数以外も入るんだなくらいに思っておけばいいと思います。
関数以外のサンプルコード
以下のように”x+=1″などを書くことができます。
See the Pen setInterval test count by Nakamoto (@programmerlife) on CodePen.
JSのみ抜粋
let x = 0;
function startFunction() {
setInterval(“x+=1”, 1000);
}
function finishFunction() {
alert(x);
}
ダブルクォーテーションで囲うのを忘れると動かないので忘れないように気を付けましょう。
関数を呼び出すサンプルコード
5秒ごとにアラートが表示されます。
※Startをクリックするとalertが５秒ごとに表示されるので、確認後はページを再表示してください。
See the Pen setInterval test count 5seconds by Nakamoto (@programmerlife) on CodePen.
JSのみ抜粋
function startFunction() {
setInterval(“myAlert()”, 5000);
}
function myAlert() {
alert(“5秒経ちました”);
}
関数を呼び出す場合はダブルクォーテーションが必要ですが、functionを直接書き込む場合はダブルクォーテーションは不要です。
例：setInterval(function(){ alert(“Hello”); }, 3000)
setInterval()を止めるサンプルコード
動かしたら止めてみたいですよね。
See the Pen setInterval test stop by Nakamoto (@programmerlife) on CodePen.
JSのみ抜粋
let controlTimer = setInterval(timer, 1000);
function timer() {
let d = new Date();
//今の時間を取得
let t = d.toLocaleTimeString();
// id demoに時間を反映
document.getElementById(“demo”).innerHTML = t;
}
function finishFunction() {
//controlTimerの処理を止める
clearInterval(controlTimer);
}
setInterval() 進捗バー
参考元のかっこよかったやつ。
See the Pen setInterval test bar by Nakamoto (@programmerlife) on CodePen.
参考サイト：https://www.w3schools.com/jsref/met_win_setinterval.asp
