What is the proper way to wait a script loaded completely before another

Question

I am making a website that is divided by several sections

<div id='section-1' class='section'>web content</div>
<div id='section-2' class='section'>web content</div>

I have like ten sections on my webpage ,each sections height is set to the user window height when document is ready by javascript

$('.section').height($(window).height());

Some effects like slideshows on my webpage require the calculated height of the section in order to work properly. Therefore I always use something like this at document ready as a solution.

setTimeout(startslideshow,1000);
setTimeout(startanimations,1000); ...etc  

To make sure the section height is the user window height before the slideshow's code start because the sections cannot change to user window height instantly once the webpage loaded will generate serious problems in my slideshow code,like wrong calculated positions.

Therefore there will be a situation that's after the page loaded, there will be about a second everything is messed up,before everything can works properly, how could I avoid that being seen by the user? I tried to $(document).hide() ,or $('html,body').hide() , then fade in after a second,but I get other weird problems, especially on ipad,my fixed position top navigation bar will always become 'not fixed' while user is scrolling.

As I am a self-learner, I afraid my method is not typical. I want to know what is the common ways of real web programmers usually do when they have to divide his webpage into different sections and set its height to window height , then make sure the other effects that's depends on the section height works properly and avoid to wait the height change for a second?

Answer 1

You should look at chaining Asynchronous calls.

relying on timers is not recommended as scripts may execute at different speeds on different browsers, hardware, etc.