如何按顺序执行数组中的函数？
0
悬赏园豆：5
[已解决问题]
解决于 2019-04-27 15:47
我想实现这样一个功能：数组里都是函数，每个函数里都有定时器，用来模拟动画过程，按照顺序依次执行这些函数。
let num = 0;
function a(){
setTimeout(function(){
console.log(1);
num++;
}, 2000);
};
function b(){
setTimeout(function(){
console.log(2);
num++;
}, 3000);
};
function c(){
setTimeout(function(){
console.log(3);
num++;
}, 1000);
};
let arr = [a, b, c];
arr.forEach((fn, index) => {
if(num === index){
//num 等于下标时，才能执行相应的函数
fn();
}
});这样写的话只有 a 可以执行，请高手赐教
最佳答案
0
把 num 拿到定时器外面：
$(function () {
let num = 0;
function a() {
num++;//拿到这里
setTimeout(function () {
console.log(1);
}, 2000);
};
function b() {
num++;
setTimeout(function () {
console.log(2);
}, 3000);
};
function c() {
num++;
setTimeout(function () {
console.log(3);
}, 1000);
};
let arr = [a, b, c];
arr.forEach((fn, index) => {
if (num === index) {
//num 等于下标时，才能执行相应的函数
fn();
}
});
});
收获园豆：5
感谢你的回答~不过结果和我想要的不一样，这样做相当于这3个定时器同时开启，打印出来是：3，1，2.
而我想要 a, b, c 函数依次执行：先过2秒打印1，再过3秒打印2，再过1秒打印3.有办法做到吗？
@zanetti: 根据你的意思就是说一次只能开启一个定时器么？或者理解为同一时间段只执行一个定时器，其他定时器不运作？
@骑着兔子的蜗牛: 是这个意思。其实我的实际项目中是要做给汉字依次描笔画的效果，我把它简化成这个例子了。如果同时开启多个定时器，相当于同时描红汉字的多个笔画。如果这个例子能够实现，我想实际项目就能做出来了。
@zanetti: 我只是给你一条建议：我觉得你不用写这么多定时器，写成一个就好。大概思路这样：汉字的笔画你会定义一个数组，每个笔画为其中元素，你要描写什么字用什么笔画组成直接取用就好，每次取用之后你要不要同步显示到界面，这个过程你自己看着决定。仅供参考
@骑着兔子的蜗牛: 谢谢你的建议，我还在尝试中……
其他回答(2)
0
num 放在全局 里面进行重新累加赋值
0
$(function () {
let num = 0;
function a(next) {
num++;//拿到这里
setTimeout(function () {
console.log(1);
next(); //执行下一个函数
}, 2000);
};
function b(next) {
num++;
setTimeout(function () {
console.log(2);
next(); //执行下一个函数
}, 3000);
};
function c(next) {
num++;
setTimeout(function () {
console.log(3);
next(); //执行下一个函数
}, 1000);
};
let arr = [a, b, c];
//创建一个迭代器,按顺序执行多个异步函数
function MyIteration(arr){
var that = this;
var num = 0;
var len = arr.length;
var fn = arr[num];
fn.call(that,callback);
//上一步执行的结果
function callback(){
num++;
if(num < len){
var fn = arr[num];
fn.call(that,callback);
}
}
}
MyIteration(arr)});
太感谢了！终于把这个问题解了