自定义时间触发回调函数的解决方案

最新推荐文章于 2022-07-13 18:11:51 发布

node2017

最新推荐文章于 2022-07-13 18:11:51 发布

阅读量2.1k

点赞数

分类专栏：前端开发文章标签：自定义时间视差动画

本文链接：https://blog.csdn.net/yingxiake/article/details/50931840

版权

前端开发专栏收录该内容

24 篇文章 1 订阅

订阅专栏

在做css3的动画时，我们想让几块不同的动画场景，按照不同的时间出现，这样子可以形成视差动画，而不是上一个动画执行完了，下一个动画就开始了，我们想自己定义动画出场的时间。

这里说白了，就是定义个回调函数队列，等到时间到了，就触发执行。

我们就先定一个队列来存放回调函数

var Queue = function(){ 
    /**
     * 存放回调函数的数组
     */
    var fnArr = null;
}

提供一个方法存放回调函数

/**
 * 添加一个函数
 * @param fn 延时到未来某个时间，回调函数
 * @param delay 延时多少时间之后调用
 * @param transObj 传送的对象，将值将会在回调中，作为参数传给回调者
 */
this.add = function(fn,delay,transObj){
    if(typeof fn != "function") return ;
    if(!fnArr) fnArr = new Array();
    fnArr.push({
        fn : fn ,
        transObj : transObj ,
        delay : delay ? delay :  0
   });
   return this ; //支持链式回调
};

transObj 的作用是做一个现在和未来的标志，将现在的一个对象，放到回调队列中，当定义的时间到了，把transobj作为参数触发回调函数参数，这样子做的目的是解决现在和未来数据同步的问题，在下面的例子中，可以看到该参数的所用。

接下来，我们还需要一个触发回调的函数

/**
 * 按照延时时间对数组排序
 */
var sort = function(){
     for (var i = 0; i < fnArr.length - 1; i++) {//比较的次数是length-1
            for (var j = 0; j < fnArr.length - 1 - i; j++) {
                if(fnArr[j].delay < fnArr[j + 1].delay){
                    var temp = fnArr[j];
                    fnArr[j] = fnArr[j + 1] ;
                    fnArr[j + 1] = temp ;
                }
            }
        }
};

/**
 * 触发执行
 */
this.fire = function(){
    if(fnArr && fnArr.length > 0){
        for(var i = 0 ;i < fnArr.length;i++){
            sort();  //对回调数组安装延时时间进行排序
            setTimeout(function(){
              var obj = fnArr[fnArr.length - 1];
              obj.fn.call(null,obj.transObj); //触发回调
              fnArr.pop(); //把已经执行的回调函数删除，避免下个回调函数和延时时间对应的回调函数一致
            },fnArr[fnArr.length - i - 1].delay);
        }
    }
};

对回调排序的目的，是因为遍历未来某个回调函数触发会发生数据不一致问题，例如上面for(var i = 0 ;i < fnArr.length;i++),当用setTimeout触发某个执行函数体的时候，i的值，早就变化了，例如，我延时3s之后，想触发fnArr[0].fn的回调函数，可是发现他却给我触发fnArr[3].fn的回调函数，通过把回调函数按延时时间排序，因为回调函数的执行顺序总是按照时间从小到大顺序执行。

完整的回调队列类如下

/**
 * 函数队列工具类，按步骤执行的函数，可以设置延迟执行时间，添加进来的函数，不支持异步
 * @author liuxg
 * @date 2016年3月18日 下午3:21:34
 */
var Queue = function(){

    /**
     * 存放执行函数的数组
     */
    var fnArr = null;

    /**
     * 添加一个函数
     * @param fn 延时到未来某个时间，回调函数
     * @param delay 延时多少时间之后调用
     * @param transObj 传送的对象，将值将会在回调中，作为参数传给回调者
     */
    this.add = function(fn,delay,transObj){
        if(typeof fn != "function") return ;
        if(!fnArr) fnArr = new Array();
        fnArr.push({
            fn : fn ,
            transObj : transObj ,
            delay : delay ? delay :  0
       });
       return this ;
    };

    /**
     * 数组排序
     */
    var sort = function(){
         for (var i = 0; i < fnArr.length - 1; i++) {//比较的次数是length-1
                for (var j = 0; j < fnArr.length - 1 - i; j++) {
                    if(fnArr[j].delay < fnArr[j + 1].delay){
                        var temp = fnArr[j];
                        fnArr[j] = fnArr[j + 1] ;
                        fnArr[j + 1] = temp ;
                    }
                }
            }
    };

    /**
     * 触发执行
     */
    this.fire = function(){
        if(fnArr && fnArr.length > 0){
            sort();
            for(var i = 0 ;i < fnArr.length;i++){
                setTimeout(function(){
                  var obj = fnArr[fnArr.length - 1];
                  obj.fn.call(null,obj.transObj);
                  fnArr.pop();
                },fnArr[fnArr.length - i - 1].delay);
            }
        }
    };

    /**
     * 清空函数数组
     */
    this.clear = function(){
        fnArr = null ;
    };

    /**
      * 返回函数对象数组
      */
    this.getFnArr = function(){
        return fnArr ;
    }

}

举个例子，我们做个视差动画，我们这样子使用，首先是html代码

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>视差动画测试</title>
</head>
<style>
div{
  border : 1px solid red ;
  height : 25px;
  width : 200px;
  margin : 10px 20px;
  visibility : hidden ;
  font-family : 微软雅黑;
}
.animated {
  animation : animations .3s ease-in-out ;
}
@keyframes animations{
   from{
      opacity : 0 ;
      transform : translateX(-100px);
   }
   to {
      opacity : 1;
      transform : translateX(0);
   }
}
</style>
<body>

  <div>我是动画一</div>
  <div>我是动画二</div>
  <div>我是动画三</div>
  <div>我是动画四</div>
  <div>我是动画五</div>

<script type="text/javascript" src="queueUtil.js"></script>
<script type="text/javascript" src="test.js"></script>
</body>
</html>

再来是js代码

var queue = new Queue();
var divs = document.getElementsByTagName("div");
for(var i = 0 ;i < divs.length ;i++){
    queue.add(function(index){//这里的index是把i传到回调队列中，当时间到了，再把现在传过去的i作为参数触发回调函数，而index在这里的作用就是标志divs[index]，获取具体的div dom
      divs[index].style.visibility = "visible";
      divs[index].className = "animated";
    },i * 100 , i);//将当前i传给回调队列
}
queue.fire();

这里的视差效果，纯css3 animation也能做到，利用animation-delay和animation-fill-mode。这里提供的是自定义行为的回调队列解决方案，对于数量太多的dom节点和需要最大程度自定义行为时，这是个很好的解决方案

node2017

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
自定义时间触发回调函数的解决方案

在做css3的动画时，我们想让几块不同的动画场景，按照不同的时间出现，这样子可以形成视差动画，而不是上一个动画执行完了，下一个动画就开始了，我们想自己定义动画出场的时间。这里说白了，就是定义个回调函数队列，在时间到了，就触发执行。我们就先定一个队列来存放回调函数var Queue = function(){ /** * 存放回调函数的数组 */ var fnAr
复制链接

扫一扫