0

我想创建一个函数，在调用时会显示“正在加载...”消息，并在完成后立即显示结果。当我这样做时：

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

    /* do something */
    ...

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

“加载”消息永远不会出现，一段时间后用户看到的只是“完成”消息和结果。我怎样才能让“加载”文本出现在我想要的那一刻？

4

3 回答 3

3

如果“做某事”是同步的，则浏览器永远不会有机会在两次内容更改之间更新 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 回答