javascript はシングルスレッドだそうです。タイマーを使えば一応解決。
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 を代入しなおせばいいのですが、
それは次回に。（端折って書いてるのでわかりにくくてすいません。)
コメント