Zhao Yi Zhao Yi - 2 months ago 7
jQuery Question

How to make a series sync call on javascript

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?

Answer

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.

Comments