Question

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

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

    /* do something */
    ...

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

“加载”消息永远不会出现，过了一段时间，用户看到的只是“完成”消息和结果。如何在我想要的时刻出现“加载”文本？

Answer 1

如果“做某事”是同步的，浏览器永远不会有机会在两次内容更改之间更新UI。

要显示更改，您需要执行以下操作：

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

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

setTimeout调用让用户界面有机会在跳转到“某事”之前更新显示。

请注意，如果可能，您应该尝试确保“某些内容”不会长时间占用您的浏览器。尝试将任务分解为多个块，其中每个块也使用setTimeout()进行调度。

Answer 2

很难说没有看到“东西”部分，但我希望这有点帮助;

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)
}

Answer 3

关键在于“做某事”。这取决于你想做什么，但我希望你想使用jQuery的load()函数。

许多jQuery函数接受在任务完成后执行的“回调函数”。 load（）文档的回调函数部分应该解释所有内容。

Javascript：如何在函数完成运行之前对文档进行更改？

3 个答案: