タイマーを止めたあと、マウスクリックイベントを停止するサンプルです。
onclick に null を代入しています。
----
<!DOCTYPE html> <html> <head> <title>global test timer</title> <meta charset="UTF-8"> <script> "use strict"; // 広域変数 var testValue=0,timer; var message,addCount; // // 初期化関数 function init() { // alert("init"); message = document.getElementById("message"); message.textContent=testValue; addCount = document.getElementById("addCount"); // alert(document.getElementById("addCount")); // alert(addCount); // alert("init2"); addCount.onclick=click; // alert("start"); timer = setInterval(tick, 100); } function tick(){ if(testValue < 5){ message.textContent=testValue; }else{ message.textContent="end"; addCount.onclick=null; clearInterval(timer); } } function click(e){ testValue++; alert(testValue); //debug } </script> </head> <body onload="init()"> <button id="addCount">click test</button> <p id="message"></p> </body> </html>]]>
--
http://www3.synapse.ne.jp/wtz/programming/html5/globalTestTimer2.html
----
javascript はシングルスレッドだそうです。マルチスレッドではありません。
例えば下記のプログラムは期待通りの動きをしません。
----
<!DOCTYPE html> <html> <head> <title>global test</title> <meta charset="UTF-8"> <script> "use strict"; // 広域変数 var testValue=0; var message; // 初期化関数 function init() { message = document.getElementById("message"); message.textContent=testValue; // alert("start"); while(testValue < 5){ sleep(1000); message.textContent=testValue; } message.textContent="end"; } </script> </head> <body onload="init()"> <button onclick="testValue++">click test</button> <p id="message"></p> </body> </html>
--
http://www3.synapse.ne.jp/wtz/programming/html5/globalTest.html
----
body の button 要素の中身を
<button onclick="testValue++;alert(testValue)">click test</button> に
書き換えてみれば、大域変数 testValue の値は変化していってるのがわかると思います。
これを解決するにはタイマーを使えばよいようです。 script の中を以下のように書き換えます。
----
<script> "use strict"; // 広域変数 var testValue=0,timer; var message; // 初期化関数 function init() { message = document.getElementById("message"); message.textContent=testValue; // alert("start"); timer = setInterval(tick, 100); } function tick(){ if(testValue < 5){ // sleep(1000); message.textContent=testValue; //debug }else{ message.textContent="end"; clearInterval(timer); } } </script>
--
http://www3.synapse.ne.jp/wtz/programming/html5/globalTestTimer.html
----
実際のところ、上に書いたような alert 関数を今回も使ってみれば
testValue の値自体は増加し続けているのがわかると思います。
これを避けるには onClick を使用せず getElementById 関数を使って
onclick に関数を設定し、終わったら null を代入しなおせばいいのですが、
それは次回に。(端折って書いてるのでわかりにくくてすいません。)
---- <!DOCTYPE HTML> <html lang="ja"> <head> <meta charset='UTF-8'> </head> <body> <span id='t' style='color:blue; border-width:1px; border-style:solid;'>ここをクリック</span> <div id='elements'></div> <script type="text/javascript"> "use strict"; var t = document.getElementById('t'); var elements = document.getElementById('elements'); t.onclick=click; function click(e){ var s=''; for(var o in e){ s+=o+' : '+e[o]+'<br />'; } elements.innerHTML=s; } </script> </body> </html> ----
ここをクリック
]]>しばらく前に買った「ゲームで学ぶ JavaScript 入門 HTML5&CSS も身につく!」と
いう本。大変勉強になるのだが 15puzzle が初期画像は出るのだが
数字をクリックしても何も反応が出ない。
私は普段 firefox を使っているのだが、他のブラウザ、IE11,opera12.18,
Google chrome (現最新バージョン) 49.0.2623.87 m (64-bit) では動くのだが
firefox (最新バージョン)45.0 でだけ全く反応がありません。
内容は初期化関数で
---- function init() { var table = document.getElementById("table"); for (var i = 0 ; i < 4 ; i++) { var tr = document.createElement("tr"); for (var j = 0 ; j < 4 ; j++) { var td = document.createElement("td"); var index = i * 4 + j; td.className = "tile"; td.index = index; td.value = index; td.textContent = index == 0 ? "" : index; td.onclick = click; tr.appendChild(td); tiles.push(td); } table.appendChild(tr); } for (var i = 0 ; i < 1000 ; i++) { click({ srcElement: {index: Math.floor(Math.random() * 16)}}) } } ----
というふうに数字の並んだ table を作って行き、数字の書かれた枠をクリックしたら
関数 click を呼び出すというもの。
で、その中身はどうなっているかというと、頭だけ引用すると
----
function click(e) { var i = e.srcElement.index;
----
となっている。
でネットで散々調べた末に
「JavaScript - ブラウザ毎のイベント発生元取得テスト」
http://tsoft-web.com/sub/tips/event/
というページにたどりつき、「クリック後、大体こんな感じで取得」のサンプルページを
表示させ、「click me」と書かれた部分をクリックすると、
「e.srcElement = not exists」とあるではないか。
そこで上に引用した 15puzzle の2ヶ所の 'srcElement' を 'target' に
書き換えたところ、まともに動くようになった。
他のブラウザでもちゃんと動くようで解決した。
なお、srcElement にしか対応していないブラウザ上でも動かすには、上の一行を
var i = (e.srcElement ||e.target).index;
とすればよいようだ。