jQuery（およびJavaScript）にsetTimeoutという関数があります。
jQueryプログラマーを目指している方にとってsetTimeoutは重要な関数です。
指定したタイミングで、指定した関数を実行できるおもしろ関数ですが、今回はそれを使ってストップウォッチみたいなものをつくってみました。
相変わらず、しょぼいデザインと機能ですが、それなりに動いているのでご容赦ください（＾ｕ＾）
これからも定期的にjQueryに関する記事をあげていこうと思う次第です。
どうぞ、よろしくお願いいたします。
みなさんもjQueryでレッツ!(^^)!プログラミング
あ、これですね。一応、ストップウォッチのつもりです。
HTMLとCSS
<html lang="ja">
<head>
<meta charset="utf-8">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<style>
.count_timer_container table{
width:100%;
height:100%;
}
.count_timer_container table td{
width:25%;
height:20%;
border:1px solid #eee;
background-color:white;
}
.count_timer_container table input{
font-size:5vh;
height:100%;
width:100%;
text-align:center;
border:none;
background-color:white;
}
</style>
</head>
<body>
<center class="count_timer_container">
<table border="5">
<tr>
<td colspan="2">
<input class="count_display" type="text" size="20" value="" disabled>
</td>
</tr>
<tr>
<td><input class="btn_start" type="button" value="start"></td>
<td><input class="btn_stop" type="button" value="stop"></td>
</tr>
<tr>
<td colspan="2" >
<input class="btn_clear" type="button" size="20" value="clear">
</td>
</tr>
</table>
</center>
</body>
</html>
jQuery
<script type="text/javascript">
/*
ストップウォッチ
主な概要：
スタートボタンを押下して計測を開始。
ストップボタンを押下して開始から経過した時間を取得できる
*/
jQuery(document).ready(function ($) {
let num_ms = 0;//ミリ秒
let num_s = 0;//秒
let num_m = 0;//分
let now_time = 0;//現在時刻
let start_time = 0;//スタートボタン押下時の時刻
let pre_time = 0;//ストップボタン押下時の経過時間
let time_id = 0;//setTimeout（）を止める時に必要なID
let date = 0;//Date()のオブジェクト変数
let count_data = 0;//一時的な数値を格納する際に使用
let count_display = '';//一時的な文字を格納する際に使用
/*
初期値の設定
*/
$(".count_display").val('00' +':' + '00' + ':' + '00' ) ;
//スタートボタンを有効にする
$(".btn_start").prop('disabled', false);
//ストップボタンを無効にする
$(".btn_stop").prop('disabled', true);
/*
■スタートボタン
・スタートボタンが押下されたら、スタートボタンを無効にしてストップボタンを有効にする
・スタートボタン押下時の時刻を取得しておく
・countUp()を実行して計測開始
*/
$(".btn_start").on('click',function(){
$(".btn_start").prop('disabled', true);
$(".btn_stop").prop('disabled', false);
start_time = Date.now();
countUp();
});
/*
■ストップボタン
・ストップボタンが押下されたら、スタートボタンを有効にしてストップボタンを無効にする
・ストップボタン押下時の経過時間を取得しておく【繰り返し計測する際に必要となる】
・計測を止める【setTimeout関数を止めるにはIDを指定する必要がある】
*/
$(".btn_stop").on('click',function(){
$(".btn_start").prop('disabled', false);
$(".btn_stop").prop('disabled', true);
pre_time += now_time - start_time;
clearTimeout(time_id);
});
/*
■クリアボタン
・変数の初期値を0にする
・クリアボタンが押下されたら、スタートボタンを有効にしてストップボタンを無効にする
・画面を00:00:00にする
*/
$(".btn_clear").on('click',function(){
clearTimeout(time_id);
now_time = 0;
start_time = 0;
pre_time = 0;
$(".btn_start").prop('disabled', false);
$(".btn_stop").prop('disabled', true);
$(".count_display").val('00' +':' + '00' + ':' + '00' ) ;
});
/*
■経過時間の計測【下記内容を1ミリ秒毎に、無限に実行する
・現在時刻を取得
・現在時刻 － 開始時刻 ＋ 前回の履歴（前回の経過時間） で経過時間を取得
・経過した【分・秒・ミリ秒】を変数に格納
・画面に経過時間を表示
*/
function countUp() {
now_time = Date.now();
date = new Date(now_time - start_time + pre_time);
num_ms = Math.floor(date.getMilliseconds() / 10);
num_s = date.getSeconds();
//setTimeoutに『無名関数』を使用しており、わかりにくいがsetTimeout(関数A,そのAを実行するタイミング)の中に特殊な記述法で書いてる
//要するに自分自身【countUp】を1ミリ秒毎に実行するという意味【つまり、1ミリ秒間隔で無限に実行】
//その際、返り値（ID）もtime_idに取得しておく。ストップする時にIDが必要なので。
num_m = date.getMinutes();
time_id = setTimeout(() => {
countUp();
},1);
//経過時間の表示
//１桁の場合は数値の前に０を付けて画面に表示する
$(".count_display").val(addDigits(num_m) +':' + addDigits(num_s) + ':' + addDigits(num_ms));
}
/*
■２桁表示
・１桁の場合は数値の前に０を付ける
・例： 1秒 → 01秒
*/
function addDigits(count_data){
if(count_data < 10){
count_display = '0' + count_data;
}else{
count_display = count_data;
}
return count_display;
}
});
</script>
以上がソースコードとなります。
特筆すべき点はありませんが、強いて言うならココでしょうか。setTimeout関数の第一引数に無名関数を使っているので、ちょっとわかりにくいですよね。
time_id = setTimeout(() => {
countUp();
},1);
ここはつまりこんな感じです。
time_id = setTimeout(countUp,１)
あれ……これって……
そうです。
countUp関数の中でcountUp関数を実行しています。
その結果、無限に『１ミリ秒後にcountUpを実行』という処理が続くわけですね。
ストップウォッチの心臓部分というわけです。
あと、ストップウォッチである以上、STOPボタンで停止できなければ意味がありません。
「time_id = 」でsetTimeoutの返り値（ID）を取得していますが、このIDはsetTimeoutを停止するのに必要なのです。
以上、たったの３行ですが重要なポイントでした(^J^)
どこでも食っていけるWeb人間になれる【Web食いオンラインスクール】
