如何在javascript上进行系列同步调用

How to make a series sync call on javascript

本文关键字：系列 同步 调用 javascript      更新时间：2023-09-26

我想在javascript中按顺序进行一系列函数调用。我的情况是，我想上传一些图像到服务器一个接一个，但我不知道如何在javascript中做到这一点。下面是一个解决已知数量函数同步调用的方法。

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

你可以看到有三个函数链接在一起。如果我一开始就知道函数的个数，它就成立了。但如何实现这一未知的函数数?

用'尚未调用'的方法创建一个数组怎么样?还有一个递归函数，一直运行到数组为空。看一下这个简化的例子:

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();

这里最好的方法是利用promise，但我认为为了你自己的学习，可能值得深入研究回调版本。

当你说unknown number of functions时，我假设你可能有一个你想要处理的数组，并且这个数组可以改变。我们还假设您的数组包含有关您希望如何处理每个项的详细信息。例如:

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

你可以利用它的一种方法是使用递归。有许多实现递归的方法，但这里有一个例子:

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!');
});

这实际上是从自身内部调用相同的函数，更新下一个需要使用的项的数组索引。当条目用完时，它调用传入的total complete函数

相关文章：