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

时间:2016-09-15 06:57:05

标签: javascript jquery

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

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

您可以看到链接在一起的三个功能。如果我首先知道函数的数量,它就有效。但是如何实现这个未知功能的数量呢?

3 个答案:

答案 0 :(得分:1)

如何使用'来调用'方法。还有一个递归函数,它一直运行到数组为空。看看这个简化的例子:



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




答案 1 :(得分:0)

您可以使用承诺实现此目的。使用this stackoverflow post中的代码对此进行了解释。

答案 2 :(得分:0)

这里最好的办法是利用promises,但我认为值得深入研究一下你自己教育的回调版本。

当你说未知数量的函数时,我假设你可能有一些你想要处理的东西,并且这个数组可以改变。我们还假设您的数组包含有关您希望如何处理每个项目的详细信息。例如:

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

因此,您可以通过recursion使用此方法。有很多方法可以实现递归,但这里有一个例子:

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

这本质上从内部调用相同的函数,更新使用所需的下一项的数组索引。当项目用完时,它会调用传入的完整函数。