CODEWITHSUNDEEP
javascriptfunction
Ben Muircroft
Ben Muircroft

Reputation: 3034

sequential functions javascript

I'm having major trouble getting my app to behave while loading. I don't think it is very fair to users to allow them access to the app until it's finished loading and is ready / responsive.

Please note: every thing else works fine in my app I just can't get functions to run in order.

function LOADINGapp(){
    //app loads but allows user to enter before loading is finished
    $.when(getToday()).then(reorderdivs()).then(getSomething()).then(setupSomethingElse()).then(loadAnotherSomething()).then(INITapp());

    //app stops dead at getToday but (Crome javascript console) no errors
    getToday(function(){reorderdivs(function(){getSomething(function(){setupSomethingElse(function(){loadAnotherSomething(function(){INITapp();});});});});});

    //app loads but allows user to enter before loading is finished
    getToday(reorderdivs(),getSomething(),setupSomethingElse(),loadAnotherSomething(),INITapp());

    //getToday();
    //reorderdivs();
    //getSomething();
    //setupSomethingElse();
    //loadAnotherSomething();
    //INITapp();
    }
function INITapp(){
    $('#SPLASH').hide();
    }

Can someone please assist me, I don't understand. Done and doing a tone of research to get this to behave.

Thanks

Upvotes: 1

Views: 735

Answers (3)

Ben Muircroft
Ben Muircroft

Reputation: 3034

I solved it by jumping (only allowing my LOADINGapp function to do one thing at a time) so it works in stages. once a stage (a function) is complete it jumps back into the LOADINGapp function.

var L=0;

function LOADINGapp(){
    if(L==0){getToday();}
    else if(L==1){reorderdivs();}
    else if(L==2){getSomething();}
    else if(L==3){setupSomethingElse();}
    else if(L==4){loadAnotherSomething();}
    else if(L==5){INITapp();};
    }
function INITapp(){
    $('#SPLASH').hide();
    }

example:

function getSomething(){
    //app suff
    //app suff
    //app suff
    L = 3;
    LOADINGapp();
    }

the only thing I will improve is just do L++; at the end of LOADINGapp as it saves writing it all over the place. PS:thanks for the efforts guys

Upvotes: 1

Morgan T.
Morgan T.

Reputation: 1937

I haven't used when/then from jquery before, but it looks like you need to pass the pointers to the methods. Right now you are actually executing them all at once. Try:

$.when(getToday())
 .then(reorderdivs)
 .then(getSomething)
 .then(setupSomethingElse)
 .then(loadAnotherSomething)
 .then(INITapp);

(Notice the missing parentheses)

Also, be aware the only true asynchronous object in JS is an AJAX call. setTimeout is NOT asynchronous, it is a queueing method. Read John Resig's post:

http://ejohn.org/blog/how-javascript-timers-work/

Upvotes: 2

comp500
comp500

Reputation: 364

It is probably something to do with asynchronous functions. So you could try making those functions with a callback, as mentioned here: http://pietschsoft.com/post/2008/02/JavaScript-Function-Tips-and-Tricks.aspx.

Upvotes: 0

Related Questions