make javascript loading functions to execute one after the other

Question

I have a function where in I execute 2 functions. When I view it in the browser, I get 2 loading symbols which i use for showing the loading of data.

I wanted to know if there is a way to execute each function, one after the other, since I can avoid the 2 loading symbols. I don't want to call the second function inside the first function as a solution.

The code is as shown below:

function ABCD() {
   function x();
   function y();
}

I want function x() to complete its execution and then start with function y()

that is the default nature of javascript.... with one exception if x has an asynchronous method call then execution of y will not wait for the asynchronous method to finish — Arun P Johny
– Arun P Johny, Commented Oct 31, 2014 at 12:17
Use jQuery promises and then to chain them sequentially or $.when to wait for them all to finish. Please show the rest of your code to get a better example. — iCollect.it Ltd
– iCollect.it Ltd, Commented Oct 31, 2014 at 12:18
Make sure to hide the content at the end of the first funciton. Then show the other content in the second function and hide it again at the end of the second function. Are you handling it in that way? — Lakmal Caldera
– Lakmal Caldera, Commented Oct 31, 2014 at 12:22
@plalx: going by the use of the term "loading symbols", I think we can assume ajax calls inside the two functions. — iCollect.it Ltd
– iCollect.it Ltd, Commented Oct 31, 2014 at 12:27

halfer · Accepted Answer · 2016-02-13 11:16:43Z

3

Assuming your functions return jQuery promises, you can do something like this:

function ABCD() {
   // return the sequential promises
   return x().then(y);  // or return x().done(y); if you want a result after first one only
}

then outside you can wait for both with a call like this:

ABCD().done(function(){
    alert("both complete");
});

if x and y make an ajax call just return that, as it is already a promise:

e.g.

  function x(){
      return $.ajax(...);
  }

  function y(){
      return $.ajax(...);
  }

Working Example JSFiddle: http://jsfiddle.net/TrueBlueAussie/9e5rx2bx/2/

Note: the example uses Deferred and setTimeout to simulate the ajax loads. Have the console open to see the log activity.

The older (non-promise way) would be using callbacks, however the exact implementation depends on your actual current code (which is not shown):

This is a preferred way of solving this type of issue since jQuery 1.5.

edited Feb 13, 2016 at 11:16

halfer

20.2k20 gold badges110 silver badges207 bronze badges

answered Oct 31, 2014 at 12:22

iCollect.it Ltd

93.9k26 gold badges189 silver badges210 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Nikki Over a year ago

i get an error with using "then" or "done". can you please explain me what promise is.

iCollect.it Ltd Over a year ago

@Nikki: What version of jQuery are you using? Promises are a relatively recent addition.

iCollect.it Ltd Over a year ago

@Nikki... Does the JSFiddle work for you? (it should). We would need to see the rest of your code to see how you are using the above suggestions/samples.

iCollect.it Ltd Over a year ago

Downvoter: please try the fiddle yourself before assuming anything :P This code works fine.

JRulle · Accepted Answer · 2014-10-31 13:06:04Z

1

Here is a vanilla js option (note the callback function is x() has been made optional (i.e. x() executes just fine without a callback). DEMO

function y() {
    //execute code
}

function x(callback) {
    //execute code
    if (typeof(callback) === 'function') {
        callback();
    }
}

function ABCD() {
   x(y());   
}

ABCD();

Alternate version with @TrueBlueAussie's suggestion: DEMO2

function x(callback) {
    //execute code
    if(callback) callback()
}

edited Oct 31, 2014 at 13:06

answered Oct 31, 2014 at 12:39

JRulle

7,5666 gold badges42 silver badges63 bronze badges

4 Comments

iCollect.it Ltd Over a year ago

if(callback == undefined) will blow up immediately on the next line.

JRulle Over a year ago

@TrueBlueAussie good catch... I was testing it in the fiddle and swapped the != for ==

JRulle Over a year ago

I realized that typeof(callback) === 'function' will be way more reliable and better suited to this use case

iCollect.it Ltd Over a year ago

it is usually sufficient to test only if (callback) callback() or even the simpler callback && callback()

Collectives™ on Stack Overflow

make javascript loading functions to execute one after the other

2 Answers 2

4 Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related