How do I get my page to display data that my functions process as they finish rather than when every function finishes

Question

I have got 4 functions in my doLoad() function that scan the document for spans and manipulate the data in them. these functions are very big and take a lot of time. 12 seconds.

The problem is, although these functions are independent of eachother, none of their work is presented until all 4 have finished execting.

I want them to display the data as they finish excuting instead of displaying the data after all four have finish. How can I achieve that?

this is how my doLoad function looks like

function doLoad(){

 ...
 myFunction1();
 myFunction2();
 myFunction3();
 myFunction4();

}

Answer 1

This should do the trick

function doLoad() {
  setTimeout(myFunction1,1);
  setTimeout(myFunction2,2);
  setTimeout(myFunction3,3);
  setTimeout(myFunction4,4);
}

By default, JS executes sequentially.

Answer 2

If they are really independent you can use

function doLoad(){
    ...
    setTimeout (myFunction1,5);
    setTimeout (myFunction2,5);
    setTimeout (myFunction3,5);
    setTimeout (myFunction4,5);
}