Skip to content

一个可以简化 H5 复杂动作列队次序与时间管理的小工具

License

Notifications You must be signed in to change notification settings

TevinLi/timequeue

Folders and files

NameName
Last commit message
Last commit date

Latest commit

3a902bd · Jun 22, 2017

History

19 Commits
May 17, 2016
Jun 22, 2017
Jun 21, 2017
Jun 21, 2017

Repository files navigation

timeQueue.js

一个可以简化 H5 复杂动作列队次序与时间管理的小工具
timeQueue.js 是为了有效解决了大量 setTimeout 密集调用时难以维护的问题而创建的,使用 timeQueue.js,没有 N 层嵌套,使用“相对时间”,单个添加、批量添加、改序、暂停、继续、清空等操作让时间列队简单可控。

用法

引入script

<script src="../src/timeQueue.js"></script>

使用示例

var queue1 = new TimeQueue();
//加入一个列队成员
queue1.duration(800, function() {
    $('#div1').addClass('show');
});
//多个列队成员加入链写
queue1
    .duration(4500, function() {
        $('#div2').addClass('show');
    })
    .duration(500, function() {	
        $('#div3').addClass('show');
    });

方法说明

new TimeQueue( pause );
创建一个新的时间列队,可以创建多个相互不影响

  • pause: 布尔,可选,默认false(不暂停),在开始时是否就处于暂停状态

.duration( durationTime, callback );
持续时间方式加入列队成员,本成员开始执行后,持续多长时间后再执行下一个成员(推荐)

  • durationTime: 毫秒,必须,本成员执行需要占用多长时间
  • callback: 回调,可选

.delay( delayTime, callback );
延迟时间方式加入列队成员,从上一个成员开始执行算起,延迟多少时间后执行本成员

  • delayTime: 毫秒,必须,上一成员开始执行后(尚未结束)的延迟时间
  • callback: 回调,可选

.actionList( type, list )
批量添加成员

  • type: 'duration' / 'delay',必须,list中时间的类型
  • list: 数组,必须,成员列表

list格式如下

[
    [500, function(){ /* do something a */ }],
    [700, function(){ /* do something b */ }]
]

.pause();
暂停此时间列队

.continue();
取消暂停继续执行

.clean();
清空时间列队,阻止正在计时的动作

H5 Demo

https://tevinli.github.io/timequeue/index.html
(建议在移动端打开 H5 )


项目背景

对于小而密集的多动画页面,需要大量的时间控制来让动画依次执行
如果不思考一下,拿着任务就开始写,于是就像这样

//animate 1	
setTimeout(function() {
    //animate 2
    setTimeout(function() {
        //animate 3
        setTimeout(function() {
            //animate 4
            setTimeout(function() {
                //animate 5
                setTimeout(function() {
                    //animate 6
                    //7、8、9...
                }, 1000);
            }, 1000);
        }, 1000);
    }, 1000);
}, 1000);

一般来说,动画是很难一次调整到位的,常常伴随着改来改去

问题一: 需要把动画3和动画5对调
直接移动 setTimeout 将是一件非常麻烦的事情,若只移动动画和时间也还是有些麻烦和容易出错

处于对这个问题的考虑,再多想一步,于是又有了下面这个版本

//animate 1
setTimeout(function() {
    //animate 2
}, 1000);
setTimeout(function() {
    //animate 3
}, 2000);
setTimeout(function() {
    //animate 4
}, 3000);
setTimeout(function() {
    //animate 5
}, 4000);
setTimeout(function() {
    //animate 6
}, 5000);
//7、8、9...

显而易见,这样就把嵌套分开了,这也是我们通常一些的处理办法 对于数量较少的情况,这种确实已经够用,但是如果动画比较多呢?大量小而密集的动画呢?

问题二:改变某个点的动画时间
由于列队采用的是同一时间起点的“绝对时间”,相互之间依靠数值大小来控制播放次序
对于较长的列队,各个节点相互咬合紧密,若其中的某一个节点动画延长、缩短、提前、推后,则其后的所有节点需要跟随重算一遍时间
例如:animate2的时间若要提前170毫秒,后面的节点时间需要依次改为1830、2660、3490、4320...,这需要我们手工去计算

jQuery中也存在类似问题

$("#div1").fadeIn(500, function() {
    $("#div2").fadeIn(500, function() {
        $("#div3").fadeIn(500, function() {
            //...
        });
    });
});
$("#div4").delay(1000).fadeIn();
$("#div5").delay(1400).fadeIn();
$("#div6").delay(1800).fadeIn();
//...

基于优化这些问题考虑,设计了这个时间列队管理工具
对于问题一,从调用方法上就不存在,且播放顺序由加入顺序决定
对于问题二,因为是“相对时间”,某节点变化只需要改变相应的时间即可

About

一个可以简化 H5 复杂动作列队次序与时间管理的小工具

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published