CODEWITHSUNDEEP
jqueryasynchronous
Iladarsda
Iladarsda

Reputation: 10696

jQuery - execute function before proceeding

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.

Upvotes: 1

Views: 1961

Answers (3)

Soony
Soony

Reputation: 913

Use the callback method.

Please refer to the JQuery API

Upvotes: 2

coolguy
coolguy

Reputation: 7954

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

     if(status=="success"){
          //do your stuff here ..its loaded
  }

});

Upvotes: 2

Sarfraz
Sarfraz

Reputation: 382716

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.

Upvotes: 1

Related Questions