JavaScriptのsetInterval()を使い、一定間隔で処理を繰り返す。

タイマー処理

一定間隔で処理を繰り返すときに便利なのがsetInterval()です。繰返しは任意のタイミングで止めることもできます。

まずは、簡単なタイマー処理をマスターしましょう!

今日は、コレを作りましょう!

0(ゼロ)からスタートし、数値が100になったら止まります。

 

0

JavaScript

 

HTML

まずは、HTMLからです。
idで名前を付けておきます。

 

CSS

今回、CSSは必要ありませんが、文字サイズや色を変える場合は入力してください。

 

JavaScript

一定間隔で処理を繰り返すには、setInerval()を使用します。setInterval()は、繰り返す処理と繰り返す間隔をパラメータで指定します。また、繰り返しの処理を止める必要がある場合は、戻り値を変数に格納しておきます。

変数 = setInterval(“繰り返す処理” , 間隔);

間隔は、1000が1秒間隔です。500を指定すると0.5秒間隔で処理を繰り返します。

clearInterval()により、繰り返しを止めることができますが、この時に必要になるのがsetInterval()の戻り値です。setInterval()の戻り値を引数として指定することで、繰り返しの処理を止めることができます。

PR

 

全てまとめると

これをHTMLファイルで保存すると、これだけで動作します。

スライドショーなど一定間隔で画像を切り替えるのに使えます!

 

こちらも参考に

window.setInterval(Mozilla Developer Network)

 

PR

関連記事