jQuery - execute function before proceeding

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.

return value from SomeFunction and see if it's done, could you a loop until value is returned. — Riz, Oct 24 '11 at 09:17
use a callback on .load. http://stackoverflow.com/questions/6688958/jquery-load-callback-scrolling-css-overflow, i believe that will work. — Matt, Oct 24 '11 at 09:19
seems to be quite normal flow of the script. is simeFunction doesnt have anything like `ajax` it will run the way you require it — Varun, Oct 24 '11 at 09:19

score 2 · Answer 1 · answered Oct 24 '11 at 09:21

2

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

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

});

answered Oct 24 '11 at 09:21

coolguy

7,866
9
45
71

score 2 · Answer 2 · answered Oct 24 '11 at 09:21

2

Use the callback method.

Please refer to the JQuery API

answered Oct 24 '11 at 09:21

Soony

903
9
18

score 1 · Accepted Answer · edited May 23 '17 at 12:01

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.

edited May 23 '17 at 12:01

Community

1
1

answered Oct 24 '11 at 09:18

Sarfraz

377,238
77
533
578

The quastion is - if the `SomeFunction()` is not done before `if statement` will it be skipped than? I want to make sure the order of executing is maintained. – Iladarsda Oct 24 '11 at 09:22
@NewUser: See the later approach :) – Sarfraz Oct 24 '11 at 09:24
Nearly there. Where do I put the code to be exectuted once `doStuff();` is done? Before or after `setTimeout`, or maybe inside? but how?:) – Iladarsda Oct 24 '11 at 09:33

jQuery - execute function before proceeding

3 Answers3