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

Question

I want to create a function that when called would display a "Loading..." message, and display the results as soon as it finishes. when I do it like this:

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

    /* do something */
    ...

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

The "loading" message never appears, after a while what a user sees is just the "done" message and the results. How can I make the "loading" text appear just the moment I want it to?

Answer 1

If "do something" is synchronous, the browser never gets a chance to update the UI between the two content changes.

To have the changes appear you need to do something like:

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

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

The setTimeout call gives the UI a chance to update the display before jumping into your "something".

Note that if possible you should try to ensure that "something" doesn't tie up your browser for a long time. Try to break the task up into multiple chunks, where each chunk is also dispatched using setTimeout() .

Answer 2

Hard to tell without seeing the "stuff" part, but I hope this helps a little;

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

The key is in the "do something". It depends on what you want to do but I would expect that you want to use jQuery's load() function.

Many jQuery functions accept 'callback functions' which are executed after the task is complete. The callback function section of the load() documentation should explain everything.