【JS】JavascriptのsetInterval()を使ってストップウォッチを作ってみる

一定時間ごとに処理を行う、JavascriptのsetInterval関数を使ったストップウォッチを作ってみましたので、その備忘録を兼ねたポストです。

一定時間ごとに処理を行う

処理を繰り返す setTimeout() / setInterval()

一定時間ごと処理を行うには setTimeout() または setInterval() を使います。
setTimeout() は、設定した処理を指定した時間後に一度だけ行います。
setInterval() は、設定した処理を時間ごとに何度でも繰り返し実行します。

最初の引数は処理命令を指定し、複雑な処理を行いたい場合には関数名を指定します。
二番目の引数はミリ秒となり、1秒が1000ミリ秒となります。

setTimeout()、setInterval() の戻り値はタイマーIDとなります。タイマーを停止させるには、戻り値であるタイマーIDを指定します。

リファレンス

• setTimeout(処理命令, ミリ秒);
  戻り値：タイマーID
• setInterval(処理命令, ミリ秒);
  戻り値：タイマーID

タイマーをクリアする clearTimeout() / clearInterval()

タイマーをクリアするには clearTimeout() またはclearInterval() を使います。
clearTimeout() は setTimeout() のタイマーをクリアします。
clearInterval() は setInterval() のタイマーをクリアします。
タイマーIDは setTimeout()、setInterval() でタイマー設定した際に返される値になります。

リファレンス

• clearTimeout(クリアするタイマーID);
• clearInterval(クリアするタイマーID);

まとめ

関数	処理内容	クリア関数
setTimeout()	処理を指定した時間後に一度だけ行う	clearTimeout()
setInterval()	処理を処理を時間ごとに何度でも繰り返す	clearInterval()

ストップウォッチを作る

デモ

ストップウォッチ

仕様

Start、Stop、Restart、Clearのボタンで制御。
最初はStartボタン以外をdisabledとし、Startクリック後に、Stopをアクティブに、Startをdisabledにする。
Stopクリック後にRestartとClearをアクティブに、Stopをdisabledにする。
Restartクリック後、Stopをアクティブに、Restartをdisabledにする。
Clearクリック後はStartをアクティブに、Clearをdisabledにする。
カウントはミリ秒刻みとする。
jQuery必須。

操作ボタン

スクリプト

ちと長いですが、全文載っけます。
前半がボタン制御、後半がカウントアップのスクリプトとなります。

思ったよりか、単純な作りです。
繰り返し処理なので、setInterval() を使っています。
なかなか使い勝手が良いスクリプトですね。

-Javascript,jQuery
-clearInterval(), setInterval(), ストップウォッチ