innerHTMLなどの反映タイミング

Question

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テスト

yyr446 · Accepted Answer

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

AJAXでサーバーの応答待つのは、あまりにも不正確になりがちで、
処理待ちの間ブラウザごとロックするブラウザーもあるそうです。

そこで、HTAでやってるって事なんで、wscriptshellのsleepを使って
もう一つ似たようなやつを↓

(sleep.js)
var parm = WScript.arguments;
if (parm.length > 0) {
WScript.Sleep(parm(0)*1000);
}
を準備して

HTA内からajaxSleep()で呼び出す、

function ajaxSleep(sec){
var WshShell = new ActiveXObject("WScript.Shell");
WshShell.run("wscript sleep.js " + sec , 0 ,true); //同期
WshShell = null;
}

※実際は固定のパス名(sleep.jsの保存場所)も指定しときゃなきゃいけないけど。

yyr446 · Answer

他の言語なら、sleep関数があるから、これこそ　AjaxSleep()関数　だ！

sleep.phpの中で、

taloo · Answer

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

はい。
whileでのsleepのエミュレートは「処理をしない」です。
つまり、画面の描画も行いません。
画面の描画という「sleepの処理以外の処理」を行っていませんから、正しい動作です。

なお、「正しい動作」と「期待する動作」は意味が違いますので、あしからず。

将来的にはE4XやGecko定義のJavaScript、JScriptなどでCなどのsleepと同じ物が作られるかもしれませんが、
現段階では他の動作（画面描画）をさせたい場合は、setTimeoutなど、他の処理が出来る方法を使わなければなりません。

ブラウザには処理をさせるが、利用者には処理をさせないというのであれば、
ドキュメント全体で入力を受け付け、sleep中はその処理をキャンセルするしかないですね。
<form onsubmit="return false;">
のような方法です。（他にDOMを使った方法もありますが）

どうしてもsleepを使いたいのであれば、多少強引かもしれませんが、ご参考に。
未検証です。

function testBusySleep() {
document.getElementById("status").innerText = "「BusySleep」実行中…";
setTimeout(function(){
 busySleep(waittime);
 document.getElementById("status").innerText = "BusySleep終了";
 }, 1);
}

Chaire · Answer

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

A;
sleep(10);
B;
C;

と同じことをしたければ、

A;
function callback() {
　B;
　C;
}
setTimeout(callback, 10 * 1000);

のように後続処理を全てコールバック関数に入れ、setTimeout() で遅延実行します（正確に 10 秒後にはなりませんが、今は問題にしません）。それまで使っていたコンテキスト情報をどのように渡すか、なども工夫して下さい。

要するに、sleep() を持つ言語系なら内部的にやっている継続渡し的なことを、JavaScript では自前で管理しなければならないということです。それゆえ、上から手続きをだらだら並べるのではなく、きちっと処理単位ごとにブロック化（関数化）する必要があります。まあ、この辺はイベント駆動のコードを弄った経験があればすぐに慣れると思いますし、JSDeferred などのライブラリもあります。

> while (stopTime > (new Date()).getTime()) {
言葉が悪いですが、これは一種のブラクラですので、絶対にやらないで下さい。

※余談ながら、HTML4/5 で html 要素、body 要素の開始タグと終了タグは省略可なのでサンプルでは不要です。文法的な意味で絶対に必要なのは title 要素の開始・終了タグです。
※Msxml2.XMLHTTP でバージョンを省略すると 3.0 が使われます。.NET Framework などが入っていれば MSXML 6.0 が入っている可能性が高いと思います。

taloo · Answer

同期通信はsendを行った後、画面描画や利用者（マウス操作やテキストエリアなどへのキー入力など）の処理を行わずにサーバーからの応答を待ち続けます。
質問文中のコードでは、応答があった直後はまだwhile()の中にあるため、そのまますぐに次のopen（同期通信）を行います。

whileでsleepをエミュレートする方法は、あくまで「一定時間待つ」だけであって、待っている間に何かの処理をする（処理が出来る）という物ではありません。
画面描画や利用者の処理を待つ場合は、いったん関数を抜けるか、alert()などでブラウザに処理を渡す必要があります。

yyr446 · Answer

というか、この質問もしかして、
Ajaxリクエストが完了するまで、”実行中”と表示しておいて、
完了したら”完了”と表示させたいだけなのかしら？

だとしたら、変なsleep関数作らなくても、readystateの監視だけでも
でけそうな．．．

yyr446 · Answer

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

＝＞あなたの作られたsleep関数の中で、無意味にxmlHttp.send(null)
　　を繰り返しているため、スクリプトエンジンはinnerHTMLの書き換え
　　指示を出す暇が無いのです。alertを入れると中断するのでその隙に
　　innerHTMLを書き換えることが出来ます。

これを回避する方法はあるかないか

＝＞window.setTimeout/window.clearInterval、とか
　　　window.setInterval/window.clearInterval　を
　　使えば無駄なループを実行しなくても出来ます。

あるのならその方法
省略：上のsetTimeoutとかでNET検索してみてください。

innerHTMLなどの反映タイミング

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

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

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

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

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

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

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

この回答への補足

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

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

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

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

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

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

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