innerHTMLやinnerTextでの反映タイミングについて教えてください。 JavaScriptでsleep関数の自作テストを行なっている過程で innerHTMLやinnerTextが即時には反映されない現象に直面しました。コードを貼り付けておきます。 ※htmlとしてIE等のブラウザで動かしてもいいですが、 htaとして実行したほうが簡易で軽くていいと思います。このコードでは (1)innerHTML(かinnerText)で「実行中…」を表示 (2)sleep関数を呼ぶ (3)innerHTML(かinnerText)で「終了」を表示という、(少なくとも表示部分に関しては) 極めて単純な処理をしています。しかし(1)が反映されません…。 (1)と(2)の間にalertを書いたりするときちんと(1)が表示されます。よく他言語・フレームワークではflushとかリアルタイム描画等のコマンドやオプションで対処できるので、JavaScript(JScript)でもないものかなぁと思い質問してみることにしました。質問は以下です・この現象はなぜ起こるのか。原因説明・これを回避する方法はあるかないか・あるのならその方法明示的なコマンド・オプションでも対症療法でもかまいません。環境はとりあえずはWinXP・hta(レンダリングエンジン：IE8)で動けばOKです。よろしくお願いします。 sleepテスト var waittime = 3; function testAjaxSleep() { document.getElementById("status").innerHTML = "「AjaxSleep」実行中…"; ajaxSleep(waittime); document.getElementById("status").innerHTML = "AjaxSleep終了"; } function testBusySleep() { document.getElementById("status").innerText = "「BusySleep」実行中…"; document.close(); busySleep(waittime); document.getElementById("status").innerText = "BusySleep終了"; } function ajaxSleep(sec) { var stopTime = (new Date()).getTime() + Math.floor(1000 * sec); var url = "http://www.google.com/?dummy"; var xmlHttp = new ActiveXObject("Msxml2.XMLHTTP"); while (stopTime > (new Date()).getTime()) { xmlHttp.open('GET', url, false); xmlHttp.send(null); } } function busySleep(sec) { var stopTime = (new Date()).getTime() + Math.floor(1000 * sec); while (stopTime > (new Date()).getTime()) {} }

innerHTMLなどの反映タイミング

解決済

質問者：mibusys
質問日時：2010/12/08 13:30
回答数：7件

innerHTMLやinnerTextでの反映タイミングについて教えてください。

JavaScriptでsleep関数の自作テストを行なっている過程で
innerHTMLやinnerTextが即時には反映されない現象に直面しました。
コードを貼り付けておきます。
※htmlとしてIE等のブラウザで動かしてもいいですが、
htaとして実行したほうが簡易で軽くていいと思います。

このコードでは
(1)innerHTML(かinnerText)で「実行中…」を表示
(2)sleep関数を呼ぶ
(3)innerHTML(かinnerText)で「終了」を表示
という、(少なくとも表示部分に関しては)
極めて単純な処理をしています。しかし(1)が反映されません…。

(1)と(2)の間にalertを書いたりするときちんと(1)が表示されます。

よく他言語・フレームワークではflushとかリアルタイム描画等の
コマンドやオプションで対処できるので、JavaScript(JScript)でも
ないものかなぁと思い質問してみることにしました。

質問は以下です
・この現象はなぜ起こるのか。原因説明
・これを回避する方法はあるかないか
・あるのならその方法

明示的なコマンド・オプションでも対症療法でもかまいません。
環境はとりあえずはWinXP・hta(レンダリングエンジン：IE8)で動けばOKです。
よろしくお願いします。

<html>
<body>

<div id="status">sleepテスト</div>

<input type="button" onclick="testAjaxSleep()" value="testAjaxSleep"><br>
<input type="button" onclick="testBusySleep()" value="testBusySleep"><br>
<br>

<script>
var waittime = 3;

function testAjaxSleep() {
document.getElementById("status").innerHTML = "「AjaxSleep」実行中…";
ajaxSleep(waittime);
document.getElementById("status").innerHTML = "AjaxSleep終了";
}
function testBusySleep() {
document.getElementById("status").innerText = "「BusySleep」実行中…";
document.close();
busySleep(waittime);
document.getElementById("status").innerText = "BusySleep終了";
}

function ajaxSleep(sec) {
var stopTime = (new Date()).getTime() + Math.floor(1000 * sec);
var url = "http://www.google.com/?dummy";
var xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
while (stopTime > (new Date()).getTime()) {
xmlHttp.open('GET', url, false);
xmlHttp.send(null);
}
}
function busySleep(sec) {
var stopTime = (new Date()).getTime() + Math.floor(1000 * sec);
while (stopTime > (new Date()).getTime()) {}
}
</script>

</body>
</html>

innerHTMLなどの反映タイミング

お礼書いてくれたので、蛇足となりつつも

他の言語なら、sleep関数があるから、

>待っている間に他の処理をしてもらっては困ります。

誤解があるように思われますが、現行の JavaScript で sleep() 関数は「作れません」（ActionScript などを併用する試みなどはありますが、今は考えません）。

同期通信はsendを行った後、画面描画や利用者（マウス操作やテキストエリアなどへのキー入力など）の処理を行わずにサーバーからの応答を待ち続けます。

というか、この質問もしかして、

この現象はなぜ起こるのか。

この回答への補足

似たような質問が見つかりました

このQ&Aを見た人はこんなQ&Aも見ています

関連するカテゴリからQ&Aを探す

このQ&Aを見た人がよく見るQ&A

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

　お礼書いてくれたので、蛇足となりつつも