10

時間のかかる関数が 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 に指示するにはどうすればよいですか?

4

2 に答える 2

8

setTimeout を使用して、長時間実行される関数を生成します。

function domUpdateDelayExperiment() {
  tellViewerLoading();
  setTimeout(someActionThatTakesALongTime, 50);
}

説明:関数は DOM を更新しますが、ブラウザは戻るまで変更を画面にtellViewerLoading()反映しません。setTimeout() を使用して遅延させることにより、ブラウザーに DOM の変更を反映させます。タイムアウトは任意ですが、ブラウザによっては最小値が重要になる場合があります。50 ミリ秒の値で十分です。domUpdateDelayExperiment()someActionThatTakesALongTime

于 2012-08-18T22:05:43.190 に答える
2

実際、デバッガーを使用してコードをステップ実行すると、次の関数が呼び出される前に、読み込み中のテキストが変更されていることがわかります。

ブラウザーは長い関数呼び出しでハングしているだけなので、表示されるテキストを変更できません。

次の機能に進む前に、表示を変更するための十分な時間をブラウザーに与えたい場合は、短いタイムアウトを使用すると役立ちます。

于 2012-08-18T22:07:59.437 に答える