我想在javascript中按顺序进行一系列函数调用。我的情况是我想逐个上传一些图像到服务器,但我不知道如何在javascript中这样做。下面是一种解决已知函数的同步调用的方法。
$('#art1').animate({'width':'1000px'},1000,'linear',function(){
$('#art2').animate({'width':'1000px'},1000,'linear',function(){
$('#art3').animate({'width':'1000px'},1000);
});
});
您可以看到链接在一起的三个功能。如果我首先知道函数的数量,它就有效。但是如何实现这个未知功能的数量呢?
答案 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!');
});
这本质上从内部调用相同的函数,更新使用所需的下一项的数组索引。当项目用完时,它会调用传入的完整函数。