首页 新闻 会员 周边 捐助

如何按顺序执行数组中的函数?

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 可以执行,请高手赐教

zanetti的主页 zanetti | 初学一级 | 园豆:128
提问于:2019-04-13 17:19
< >
分享
最佳答案
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
三人乐乐 | 老鸟四级 |园豆:4823 | 2019-04-13 17:39

感谢你的回答~不过结果和我想要的不一样,这样做相当于这3个定时器同时开启,打印出来是:3,1,2.
而我想要 a, b, c 函数依次执行:先过2秒打印1,再过3秒打印2,再过1秒打印3.有办法做到吗?

zanetti | 园豆:128 (初学一级) | 2019-04-13 21:58

@zanetti: 根据你的意思就是说一次只能开启一个定时器么?或者理解为同一时间段只执行一个定时器,其他定时器不运作?

骑着兔子的蜗牛 | 园豆:299 (菜鸟二级) | 2019-04-14 10:20

@骑着兔子的蜗牛: 是这个意思。其实我的实际项目中是要做给汉字依次描笔画的效果,我把它简化成这个例子了。如果同时开启多个定时器,相当于同时描红汉字的多个笔画。如果这个例子能够实现,我想实际项目就能做出来了。

zanetti | 园豆:128 (初学一级) | 2019-04-14 15:18

@zanetti: 我只是给你一条建议:我觉得你不用写这么多定时器,写成一个就好。大概思路这样:汉字的笔画你会定义一个数组,每个笔画为其中元素,你要描写什么字用什么笔画组成直接取用就好,每次取用之后你要不要同步显示到界面,这个过程你自己看着决定。仅供参考

骑着兔子的蜗牛 | 园豆:299 (菜鸟二级) | 2019-04-14 16:10

@骑着兔子的蜗牛: 谢谢你的建议,我还在尝试中……

zanetti | 园豆:128 (初学一级) | 2019-04-14 21:18
其他回答(2)
0

num 放在全局 里面进行重新累加赋值

Haisen'Blogs | 园豆:225 (菜鸟二级) | 2019-04-19 15:17
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)

});

muamaker | 园豆:763 (小虾三级) | 2019-06-10 09:55

太感谢了!终于把这个问题解了

支持(0) 反对(0) zanetti | 园豆:128 (初学一级) | 2019-06-16 21:22
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册