時間のかかる関数が JavaScript で呼び出される前に、「読み込み中」メッセージをユーザーに読み込もうとしています。
HTML:
<p id='foo'>Foo</p>
Javascript:
var foo = document.getElementById('foo');
function tellViewerLoading() {
// Tell the user that loading is occuring.
foo.innerHTML = 'loading...';
}
function someActionThatTakesALongTime() {
// Do some action that takes a long time.
var i = 0;
while(i < 100000) {i++; console.log(i);};
}
function domUpdateDelayExperiment() {
tellViewerLoading();
someActionThatTakesALongTime();
}
domUpdateDelayExperiment();
JSFiddle: http://jsfiddle.net/johnhoffman/xDRVF/
tellViewerLoading()
私がしたいのは、呼び出された直後に DOM が更新されることです。
代わりに、実行が終了した後に DOM が更新されたように見えますsomeActionThatTakesALongTime()
。その時点で、ロード中のメッセージを表示しても意味がありません。
tellViewerLoading()
が呼び出された後、すぐに DOM を更新するように JavaScript に指示するにはどうすればよいですか?