JavascriptのtimerIDの意味

2023/09/05 00:18

このQ&Aのポイント

JavascriptのtimerIDの意味を理解しよう
timerIDはタイマーを識別するID番号を表す
timerIDの値が0の場合、タイマーはストップしている

ベストアンサー

JavascriptのtimerIDの意味

2013/08/26 07:03

いつもお世話になっております。現在、Javascriptの勉強をしており、その過程でカウントダウンタイマーを作成しています。テキスト通りにsetTimeout（）メソッドなどを使用しているのですが、timerIDの意味が理解できず困っております。タイマーを識別するID番号ということはなんとなく理解できるのですが、下記コードのelse if (timerID)やtimerID=0とは何を意味しているのでしょうか。 if文の条件がtimerIDとはどういうことなのか。 timerIDの値を0にする必要性は何なのか。教えてください。 <doctype! html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>Javascript</title> <script type="text/javascript"> window.onload = init; function init(){ document.form1.start.onclick = start; document.form1.reset.onclick = stop; } var timerID; function start(){ count = parseInt(document.form1.time.value); if (count<=0){ count = 0; return; } else if (timerID){ count--; } document.form1.time.value=count; if (count==0){ clearTimeout(timerID); timerID = 0; alert("時間です"); return; } timerID = setTimeout("start()", 1000); } function stop(){ document.form1.time.value=0; if(timerID){ clearTimeout(timerID); timerID=0; } } </script> </head> <body> <h1>カウントダウンタイマー</h1> <form name="form1"> 時間<input name="time" type="text" size="3">秒<br> <input name="start" type="button" value="スタート"> <input name="reset" type="button" value="リセット"> </form> <script type="text/javascript"> </script> </body> </html>

11309646Ks
お礼率29% (5/17)

みんなの回答 （1）
専門家の回答

質問者が選んだベストアンサー

ベストアンサー

lupin-333333
ベストアンサー率31% (294/933)

2013/08/26 10:13 回答No.1

＞タイマーを識別するID番号ということはなんとなく理解できるのですこの手の問題は、経験をつめば、簡単に理解できるようになります。よく学校とかだとロジックを学びますが、ペットボトルをロケットにするなんて事は学校では教えてくれません。ポイントは＞clearTimeout(timerID); ですね。質問者が書いていますが「タイマーを識別するID番号」ですよね。”番号”てことです、setTimeout の戻り値で整数ですね。起動が成功すると、０より大きい整数がセットされるわけです。これはＥＣＭAのリファレンスで、成功した場合は、何の値がもどり、失敗した場合は何がもどり、その他のエラーは何が戻るか、確認してください。 http://www.google.co.jp/search?hl=ja&q=ECMA+%E3%83%AA%E3%83%95%E3%82%A1%E3%83%AC%E3%83%B3%E3%82%B9&lr=lang_ja#fp=b998e3b4af03b4ad&hl=ja&lr=lang_ja&psj=1&q=+ECMAScript%E3%83%AA%E3%83%95%E3%82%A1%E3%83%AC%E3%83%B3%E3%82%B9%E3%80%80%E3%80%80setTimeout&tbs=lr:lang_1ja 関数は、必ず、そうやって、その３パターンを考慮して戻り値を用意しておくものです。自作の関数も、そのように用意しましょう。今回の場合、その戻り値を使って、clearTimeoutに渡して、止める。では、setTimeoutが何らかの要因で動作しなかった場合は、関数の仕様にしたがえばいいが、ユーザーが途中で止めた場合、ユーザー操作によるキャンセルを、どうやって、記録にのこしておけばいいいのだろう。と、考えると、何か変数を別によういして　例えば statusID に true をセットするとかすればいいが、そんなことしなくても、timerID　に違う意味をもたせれば、いいこに経験をつめば容易に気がつく物です。そう、”初期化”（initialisation）よく init なんて感じで略している事が多いですね。つまり、＞function stop(){ などを見ると、＞if(timerID){ で評価しています、true(1) or false(0) ですね。データ型をJavaScript のやり方にしたがってあわせたってことです。このようなあいまいさを、ＣＳＳなどのハック（クロスブラウザ）で利用しています。他にもいっぱい、いいやり方があるので、そっちを見つけたら、そっちに変えて完成させた方がいいレベルの物です。

質問者

お礼 2013/08/27 07:08

非常に詳しく解説して頂き、ありがとうございます。関数の扱い方など、プログラミングを行う上での考え方の面でもとても為になりました。

関連するQ&A

javascriptのストップウオッチのコード
javascript初級勉強中です。以下のコードを実行すると(1)小数点第２の動きがおかしい。　(2)一度リセットボタンを押さないとタイマーが動かない。という２点の不具合が出ます。　　どうすれば解決するでしょうか？ <!DOCTYPE HTML> <head> <meta charset="utf-8"> <title>ストップウォッチ</title> </head> <body> <h1>ストップウオッチ</h1> <div id="sec" style="font-size:128px">0.00</div> <input type="button" value="Start!" onclick="run();"> <input type="button" value="Stop!" onclick="stop();"> <input type="button" value="Reset!" onclick="reset();"> <script> var statTime, stopTime, running = false, timerId; function run() { if (running)return; running = true; if (stopTime) { startTime = startTime + (new Date()).getTime() - stopTime; } if (! startTime) { startTime = (new Date()).getTime(); } timer(); //タイマー処理回していく } function timer() { document.getElementById('sec').innerHTML = (((new Date()).getTime()- startTime)/1000). toFixed(2); timerId =setTimeout(function() { timer(); //このタイマー自身を回していく }, 100); } function stop() { if (!running) return false; running = false; clearTimeout(timerId); //timerIdを渡して止める stopTime = (new Date()).getTime(); } function reset() { if (running) return; 　　startTime = undefined; document.getElementById('sec').innerHTML = '0.00'; } </script> </body> </html>
- ベストアンサー
- JavaScript
JavaScriptにて動的に配列を作成して、POSTで渡したい
独学でJavaScriptの勉強をしているものです。勉強用に作っているサイトにて、どうしてもやり方がわからないことがあるので、教えて下さい。以下のようなフォームがあったとします。 <form name="testForm1"> <input type="hidden" name="id" value="1" /> <input type="checkbox" name="check" /> </form> このフォームは動的に複数作成され、idのvalueはフォームごとに別の値が入ります。それで行いたいことは、複数あるtestForm1から、チェックボックスにチェックが付いているidだけを取得して、別のページにPOSTで渡したいんです。以下のようなスクリプトを書いたのですが、思うように動作してくれませんでした。 <form action="hoge" name="testForm2" method="post"> <input type="hidden" name="id" /> </form> function func() { var idArray = new Array(); for ( count = 0; count < document.testForm1.length; count++ ) { if ( document.testForm1.check.checked == true ) { idArray.push( document.testForm.id.value ); } } document.testForm2.id.value=idArray; document.testForm2.submit(); } JavaScriptに関しては独学で必要に応じて勉強している感じで、あまり基礎がわかっておらず、もしかしたらかなり的外れな質問になってしまっているかもしれませんが、どうか宜しくお願い致します。
- ベストアンサー
- JavaScript
JavaScriptでの足し算処理について
本日よりJavaScriptに取り組んでいますが、いきなり足し算の処理でつまずきました。下記の様にdeta1に10を入れ、計算ボタンを押すとdeta2に25が入るような処理を行いたいのですが、10が文字として認識されてしまうらしく、deta2が1015になってしまいます。かなり基本的なことだと思いますが、どうすればよいか教えてください。 <script language="JavaScript">  </script> <form name=test> <INPUT type="text" name="deta1"> <INPUT type=button value="計算" onClick=func1()> <INPUT type="text" name="deta2"> </form>
- ベストアンサー
- JavaScript
javascriptに関しまして
javascriptに関しまして if文の処理に関してお聞きしたいことがあります。 <script language="JavaScript">  </script> <form name="myform"> <input type="text" size="20" name="myFormMeS"> <script language="JavaScript">  </script> </form> というサンプルコードの中で、フラグの管理をする際に初期値として、myFlg = 0をセットしているのでこんにちはと表示してからmyFlg に1を代入していますが、その後一度if文を抜けて、もう一度if(myFlg == 0)の判定を行っているのでしょうか？それとも、そのままelse処理に進むのでしょうか・・・？ if文を抜けた後にどこの判定に進むのかいまいちよく分かりません。初歩的な質問になりますが、宜しくお願い致します。
- ベストアンサー
- JavaScript
JavaScript テキストボックスキーイベント
JavaScript テキストボックスキーイベントこんにちは。趣味でプログラミングをしている者です。タイマーを使って計算ドリルを作ったのですが、特定のキーコードで正解かどうか判定する関数を呼び出そうとしたのですが、テキストボックスにこたえを入力して、キーを押すたびに「キーン」というような音が鳴るのですが、その音は、どのような仕組みで鳴るのでしょうか？また、音を鳴らさないようにする方法がありましたら、教えていただけないでしょうかよろしくお願いします <html> <head> <script type="text/javascript"> function init() { document.attachEvent("onkeypress", KotaeAwase); } function KotaeAwase() { if( event.keyCode == 13) { var key = 1; var kotae = parseInt( document.Form1.kotae.value ); var Result = document.Form1.result; if( kotae == key ) Result.value = "せいかいです!"; else Result.value = "ちがいます"; } } </script> </head> <body onLoad="init();"> <form name="Form1"> <input type="text" name="kotae" size="20"> <br><br> <input type="text" name="result" size="20"> <br> </form> </body> </html>
- ベストアンサー
- JavaScript
javascriptでCGIを実行するには
htmlタグ <form method="post" action="・・・/cgi-bin/gogo.cgi"> <input type="text" name="name" size="20" value=""> <input type="submit" value="送信"> 上記で送信ボタンを押すとcgi側でnameを受け取れますが、以下の場合はcgiは動作するのですが、nameを受け取れません、受け取れる方法を教えてください。 <script type="text/javascript" language="javascript">  </script> </head> <body> <form method="post" action="javascript:gogo()"> <input type="text" name="name" size="20" value=""> <input type="submit" value="送信"> </form>
- 締切済み
- JavaScript
2つのjavascriptを組み合わせたい
フォームメール用の2つのjavascriptがあります。 ●2重送信防止とデータ送信後指定ページへ遷移するjavascript ●テキストボックスが空欄だった時にアラートを表示するjavascript の2つです。この2つを組み合わせようとしたのですが、うまく動きません。ご指導いただきたくお願いいたします。 *************************************************** 【●2重送信防止とデータ送信後指定ページへ遷移するjavascript】【動きます】送信ボタン押下後、2重送信を防止しながら、データ送信後は「location.href = "finish.html"」でfinish.htmlを表示します。 <script type="text/javascript" src="js/jquery.js"></script> <script> jQuery(function($) { $('#form1').submit(function(event) { // HTML送信キャンセル event.preventDefault(); //フォーム要素取得 var $form = $(this); // 送信ボタンを取得 // （後で使う: 二重送信防止） var $button = $form.find('button'); // 送信 $.ajax({ url: $form.attr('action'), type: $form.attr('method'), data: $form.serialize() + '&delay=1', timeout: 10000, // 送信前 beforeSend: function(xhr, settings) { // ボタン無効二重送信防止 $button.attr('disabled', true); }, // 応答後 complete: function(xhr, textStatus) { // ボタン有効再送信許可 $button.attr('disabled', false); }, // 通信成功処理 success: function(result, textStatus, xhr) { // 入力値初期化 $form[0].reset(); location.href = "finish.html"; }, // 通信失敗処理 error: function(xhr, textStatus, error) { alert('retry');} }); }); }); </script> <form name="form1" id="form1" method="POST" name="form1" action="insert.php"> <input type="text" name="tel" value="" /> <input type="text" name="fax" value="" /> <input type="submit" value="送信A"> </form> *************************************************** 【●テキストボックスが空欄だった時にアラートを表示するjavascript】【動きます】テキストボックスが空欄だったらアラートを表示します。 <script> function check3() { 　　var tel3 = document.form1.tel.value; 　　var fax3 = document.form1.fax.value; 　　var isValid = true; 　　if (!tel3) { 　　　　alert("電話未入力"); 　　　　isValid = false; 　　} 　　if (!fax3) { 　　　　alert("FAX未入力"); 　　　　isValid = false; 　　} 　　if (!isValid) { 　　　　return; 　　} 　　document.form1.submit(); } </script> <form name="form1" id="form1" method="POST" name="form1" action="insert.php"> <input type="text" name="tel" value="" /> <input type="text" name="fax" value="" /> <input type="submit" value="送信B" onclick="check3();"> </form> *************************************************** 【上記の2つを組み合わせてみました。】【動きません】テキストボックスが空欄だったらアラートを表示しながら2重ボタン排除&finish.htmlに遷移というものです。【結果】「問題なく動くjavascript」2つを単純に組み合わせただけなのですが、 finish.htmlに遷移せずinsert.phpが表示されます。ご指導宜しくお願いします。 <script type="text/javascript" src="js/jquery.js"></script> <script> jQuery(function($) { $('#form1').submit(function(event) { event.preventDefault(); var $form = $(this); var $button = $form.find('button'); $.ajax({ url: $form.attr('action'), type: $form.attr('method'), data: $form.serialize() + '&delay=1', timeout: 10000, beforeSend: function(xhr, settings) { $button.attr('disabled', true); }, complete: function(xhr, textStatus) { $button.attr('disabled', false); }, success: function(result, textStatus, xhr) { $form[0].reset(); location.href = "finish.html"; }, error: function(xhr, textStatus, error) { alert('retry');} }); }); }); </script> <script> function check3() { 　　var tel3 = document.form1.tel.value; 　　var fax3 = document.form1.fax.value; 　　var isValid = true; 　　if (!tel3) { 　　　　alert("電話未入力"); 　　　　isValid = false; 　　} 　　if (!fax3) { 　　　　alert("FAX未入力"); 　　　　isValid = false; 　　} 　　if (!isValid) { 　　　　return; 　　} 　　document.form1.submit(); } </script> <form name="form1" id="form1" method="POST" name="form1" action="insert.php"> <input type="text" name="tel" value="" /> <input type="text" name="fax" value="" /> <input type="submit" value="送信B" onclick="check3();"> </form>
- ベストアンサー
- JavaScript
javascript 要素取得
htmlでチェックボックスを作り、その値をjavascriptで取得したいと思い、下記のようなプログラムを書きました。セレクトボックスから複数選択できるようにしたいのですが、表示されるのは複数選んだ際に一番初めに選択したものだけです。　例) 「あああ」と「いいい」を選ぶと「あああ」のみ表示される。しかし、これを「あああ.いいい」としたいのです。できれば、「あああ　いいい」と改行できるといいです。 formの中にたくさんの項目があるため、 forのところがうまくいっていないのでしょうか？どなたかよろしくお願いします。 javascript側 function checkbox(){ 　var str=""; 　for(i=0;i<document.form1.elements.length;i++){ 　　if(document.form1.elements[i].checked){ 　　　　if(str != "") str = str + "."; 　　　　str = str + document.form1.document[i].value; 　　} 　} 　if(str == ""){ 　　alert("入力してください"); 　　return false; 　}else{ 　　document.form1.submit(); 　} } HTML側 <form action="<%=遷移先ページ%>" method="post" name="form1"> <select 複数> <input 複数> <input type="checkbox" name="document" value="・あああ"/>あああ <input type="checkbox" name="document" value="・いいい"/>いいい <input type="checkbox" name="document" value="・ううう"/>ううう <input type="submit" value="Submit" onclick="return checkbox();">
- 締切済み
- JavaScript
VBSからjavascript
下記ソースの指定の箇所からjavascriptのfunction fun1(1)をよびたいのですがどう記述したらいいでしょうか。（ちなみにbody onload=は使わない条件です） <%@ LANGUAGE = VBSCRIPT %> <html> <head> <script type="text/javascript">  </script> </head> <html> <body> <form name="form1"> <input type="text" name="text2" size="14" maxlength="8" value="ABC"> <input type="text" name="text2" size="14" maxlength="8" value="DEF"> <% <-------------------ここでfun1(1)をよびたい fun(1)と書いてもエラー >% </form> </body> </html>
- ベストアンサー
- JavaScript
Javascriptを短くしたい
初歩的なことですみません。 Javascriptで表示／非表示を切り替えるものを作ろうと思うのですが、以下のサンプル文のような形では、項目数が増えるとその分だけどんどんJavascriptも長くなっていってしまいます。 Javascript文を簡潔にするには、どのように記述すればよいのでしょうか。よろしくお願いします。 <script type="text/javascript">  </script> <div id="cont1">ああああああ</div> <form> <input type="button" value="表示" onclick="Hyo1(0)"> <input type="button" value="非表示" onclick="Hyo1(1)"> </form> <form> <div id="cont2">いいいいいい</div> <input type="button" value="表示" onclick="Hyo2(0)"> <input type="button" value="非表示" onclick="Hyo2(1)"> </form>
- ベストアンサー
- JavaScript