How to make a series sync call on javascript

Question

I want to make a seres of function calls in order in javascript. My case is that I want to upload a few images to the server one by one but I don't know how to do that in javascript. Below is a method to solve a sync call for a know number of functions.

    $('#art1').animate({'width':'1000px'},1000,'linear',function(){
        $('#art2').animate({'width':'1000px'},1000,'linear',function(){
            $('#art3').animate({'width':'1000px'},1000);        
        });        
    });

You can see that there are three functions chained together. It works if I know the number of functions in the first place. But how to achieve this for unknown the number of functions?

You can achieve this using promises. This is explained beautiful with code in [this](https://stackoverflow.com/a/31070150/3585222) stackoverflow post. — Ananth Pai, Sep 15 '16 at 07:26

score 1 · Answer 1 · answered Sep 15 '16 at 07:20

How about making an array with the 'yet to call' methods. And a recursive function which runs until the array is empty. Have a look at this simplified example:

var calls = [
  ['func1', ['bar', 'foo']],
  ['func2', ['hello', 'world']],
  ['func3', [5]]
];

function func1(a, b) { console.log(b + ' ' + a) }
function func2(a, b) { console.log(a + ' ' + b) }
function func3(a) { console.log(a*a) }

function callInSerial() {
  if (calls.length > 0) {
    setTimeout(function(){
      var call = calls.shift();
      window[call[0]].apply(this, call[1]);
      callInSerial();
    }, 1000);
  }
}
callInSerial();

Matt Way · Accepted Answer · 2016-09-15T10:16:05.600

The best thing to do here is utilise promises, but I think it might be worth digging into a callback version for your own education.

When you say unknown number of functions, I am assuming you likely have an array of things which you would like to process, and that this array can change. We'll also assume that your array contains details about how you want each item processed. For example:

var myArr = [
    { id: '#art1', props: ... },
    { id: '#art2', props: ... }
];

So one way you could utilise this is through using recursion. There are many ways to implement recursion, but here is one example:

function doAnim(arr, complete, index = 0){
    if(index >= arr.length){
        complete();
    }
    var item = arr[index];
    $(item.id).animate(item.props, function(){
        doAnim(arr, complete, index + 1);
    });        
}

// usage
doAnim(myArr, function(){
    console.log('Im done!');
});

This essentially calls the same function from within itself, updating the array index of the next item required for use. When the items run out, it calls the passed in total complete function.

How to make a series sync call on javascript

2 Answers2