本文链接： https://blog.csdn.net/u013560932/article/details/78508175

JavaScript setTimeout 定时器中心管理

平时写动画的时候，setTimeout十分繁琐，需要写一堆嵌套
淡入淡出一大堆，各种图片切换，由于js是单线程，异步设置定时器有很多问题，根本不考虑上一个定时器执行完没有，总是得不到想要的整体效果.
比如：

$("#zh_animate1").fadeIn(1500);
                    setTimeout(function(){
                        $("#zh_animate2").fadeIn(1500);
                        setTimeout(function(){
                            $("#zh_animate3").fadeIn(1500);
                            var k=0;
                    for(var i in json)
                    {
                        k++;
                        (function(i){
                            setTimeout(function(){
                                $("#zh_card").css("background","url("+json[i]["url"]+")");
                                $("#zh_card").fadeIn(1500);
                                setTimeout('$("#zh_card").fadeOut(1000)',3500);
                            },5000*k);
                    })(i);
                    }
                            setTimeout(function(){
                                $("#zh_animate4").fadeIn(1500);
                                    setTimeout(function(){
                                        $("#zh_animate4").fadeOut('fast');
                                        $("#zh_animate3").fadeOut('fast');
                                        $("#zh_animate2").fadeOut('fast');
                                        $("#zh_animate1").fadeOut('fast');
                                    },55000);//算清楚动画的总时间才能设置，十分麻烦
                            },1000);
                        },1000);
                    },1000);

上面的代码既不易于读，也很难扩展更多的动画。后期想要优化一下都不行，实在是太糟糕了。
所以我们必须要有一个中央定时器控制，来保证所有定时行为或异步行为按照顺序来执行.

/*
 * timer.js
 * email:[email protected]
 * qq:623059008
 * time:2017.11.11
 * description:
        这是一个用来解决所有setTimeout执行顺序的中央时间管理
        将所有需要由setTimeout执行的动画更改放到一条时间线上
        异步执行,但是自动分配延后时间，从而让动画持续显示
        在JavaScript Ninja一书中找到一个模板
        用来处理巨大数量或长时间的任务的setTimeout优化
        更改为管理setTimeout的时间线,十分好用
        甚至可以用setTimeout代替setInterval.
*/
var timers={
    timerId:-1,
    timers:[],
    wait:[],
    add:function(fn,time){
        this.timers.push(fn);
        this.wait.push(time);
    },
    start:function(){
        //Run all missions as setting wait time.
        (function runNext(){
            if(timers.timers.length>0)
            {
                //一次性分配所有任务的时间线
                var timeline=0;
                for (var i = 0; i < timers.timers.length; i++) {
                    timeline+=timers.wait[i];
                    timers.timerId = setTimeout(timers.timers[i],timeline);
                }
            }
        })();
    },
};

如何应用：

timer.add(function,持续时间);

例子：
4张背景图的动态切换,json数据的轮播显示,显示期间背景切换不停止,全部显示完后关闭4张背景图.

                //声明所有任务以及持续时间，时间线会自动分配开始时间
                timers.add(function(){
                  Picfade("zh_animate1",500,1);
                },1000);//1s后执行
                timers.add(function(){
                  Picfade("zh_animate2",500,1);
                },1000);//1后执行
                timers.add(function(){
                  Picfade("zh_animate3",500,1);
                },1000);
                timers.add(function(){
                  Picfade("zh_animate4",500,1);
                },1000);
                    //json数据显示动画，期间背景一直再变
                for(var i in json)
                {
                  (function(i){
                    timers.add(function(){
                      $("#zh_card").css("background","url(style/images/card/"+json[i]["url"]+")");
                      $("#zh_card").fadeIn(1500);
                      Picfade("zh_animate4",500,0);
                      Picfade("zh_animate3",500,0);
                    },1500);
                    timers.add(function(){
                      $("#zh_card").fadeOut(1000)
                      Picfade("zh_animate3",500,1);
                      Picfade("zh_animate4",500,1);
                    },1000);
                  })(i);
                }
                timers.add(function(){
                  Picfade("zh_animate4",500,0);
                  Picfade("zh_animate3",500,0);
                  Picfade("zh_animate2",500,0);
                  Picfade("zh_animate1",500,0);
                },500);

                //将所有任务按时间线执行
                timers.start();

这样管理之后，开发没有那么多嵌套了，想要再添加什么新的动画也容易了很多.

JavaScript定时器管理----更便捷的开发网页动画

JavaScript setTimeout 定时器中心管理

猜你喜欢