0

呼び出されたときに「読み込み中...」メッセージを表示し、終了するとすぐに結果を表示する関数を作成したいと考えています。私がこのようにすると：

function load() {
    $('#status').html("loading...");

    /* do something */
    ...

    $('#status').html("done");
    $('results').html(result);
}

「読み込み中」メッセージは表示されず、しばらくすると、ユーザーに表示されるのは「完了」メッセージと結果だけです。「読み込み中」のテキストを必要なときに表示するにはどうすればよいですか?

4

3 に答える 3

3

「何かをする」が同期している場合、ブラウザは2つのコンテンツ変更の間にUIを更新する機会を得ることができません。

変更を表示するには、次のような操作を行う必要があります。

$('#status').html('loading...');
setTimeout(function() {
     // do something

     $('#status').html('done');
}, 0);

このsetTimeout呼び出しにより、UIは、「何か」にジャンプする前に表示を更新する機会が与えられます。

可能であれば、「何か」がブラウザを長時間拘束しないようにする必要があることに注意してください。タスクを複数のチャンクに分割してみてください。各チャンクもを使用してディスパッチされsetTimeout()ます。

于 2012-07-18T08:41:47.437 に答える
1

「もの」の部分を見ずに見分けるのは難しいですが、これが少し役立つことを願っています。

function load() {
  $('#status').html("loading...");

  function onLoaded(result) {
    $('#status').html("done");
    $('results').html(result);
  }

  // do your stuff here

  // Not being able to see the "stuff", I guess you do some AJAX or something
  // else which is asynchronous? if you do, at the end of your callback, add
  // onLoaded(result)
}
于 2012-07-18T08:46:37.993 に答える
0

重要なのは「何かをする」ことです。何をしたいかによって異なりますが、jQuery のload()関数を使用することをお勧めします。

多くの jQuery 関数は、タスクの完了後に実行される「コールバック関数」を受け入れます。load() ドキュメントのコールバック関数セクションですべてを説明する必要があります。

于 2012-07-18T08:51:04.133 に答える