Question

How can I stop executing function till another function is done?

$('#div').load( 'sub.html', function() {

    //Do this once done loading the sub.html file
    setTimeout(function() { 

        //Run SomeFunction(); before doing anyhing else
        $('#tabsWrapper').removeClass('ajaxLoading');
        $('#tabsWrapper #loaderDiv').fadeIn(500);

    } , 1000);

});

I want to make sure SomeFunction() is done before doing $('#tabsWrapper').removeClass('ajaxLoading'); etc..

Any suggestion how can I achieve that? Any help much appreciated.

Answer 1

Return some value from your SomeFunction() and put in condition like this:

var result = null; // important to put it here eg before setTimeout

//Do this once done loading the sub.html file
setTimeout(function() { 

    result = SomeFunction();

    if (result === 'whatever that function returns') {
      $('#tabsWrapper').removeClass('ajaxLoading');
      $('#tabsWrapper #loaderDiv').fadeIn(500);
    }

} , 1000);

A better approach would be using self-invoking anonymous function something like this:

(function foo(){
   doStuff;

   setTimeout(foo, 500);

})()

Here setTimeout will only trigger when doStuff is finished.