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

水深无声 2022-07-29 09:03 155阅读 0赞

在做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节点和需要最大程度自定义行为时，这是个很好的解决方案