CODEWITHSUNDEEP
javascripthtmldom
Kuba Orlik
Kuba Orlik

Reputation: 3500

Javascript: how to make changes to the document before function finishes running?

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?

Upvotes: 0

Views: 856

Answers (3)

fie
fie

Reputation: 416

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.

Upvotes: 0

Jamie Mason
Jamie Mason

Reputation: 4196

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

Upvotes: 1

Alnitak
Alnitak

Reputation: 339816

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().

Upvotes: 4

Related Questions