
【JS】JavascriptのsetInterval()を使ってストップウォッチを作ってみる
2018/09/08
一定時間ごとに処理を行う、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() |
ストップウォッチを作る
デモ
https://lightning-bolt.xyz/js/jquery.tgCountupTimer/
ストップウォッチ
仕様
Start、Stop、Restart、Clearのボタンで制御。
最初はStartボタン以外をdisabledとし、Startクリック後に、Stopをアクティブに、Startをdisabledにする。
Stopクリック後にRestartとClearをアクティブに、Stopをdisabledにする。
Restartクリック後、Stopをアクティブに、Restartをdisabledにする。
Clearクリック後はStartをアクティブに、Clearをdisabledにする。
カウントはミリ秒刻みとする。
jQuery必須。
操作ボタン
[html]
00:00:00:0
[/html]
スクリプト
ちと長いですが、全文載っけます。
前半がボタン制御、後半がカウントアップのスクリプトとなります。
[js]
[/js]
思ったよりか、単純な作りです。
繰り返し処理なので、setInterval() を使っています。
なかなか使い勝手が良いスクリプトですね。