控制函数队列

 

关于jQuey中队列控制的两个函数 queue 和 dequeue，这两个极大方便了我们编写一些有时间差、并非立即执行完毕，却对次序要求很高的代码。

这里我再发布一个自己编写的处理队列的代码
注：这里的代码行为与jQuey的代码行为不完全 一样！

测试页面： http://shawphy.com/lab/myqueue.html

1. var myQueue = function ( fnArr ){
2.     //将队列放入fnArr
3.     this . fnArr = fnArr || [] ;
4. } ;
5. myQueue . prototype = {
6.     fnArr : [] ,
7.     queue : function ( fn )   {
8.         //如果是函数数组，则依次放入
9.         if   ( fn [ 0 ]) {
10.             for   ( var i = 0 ; fn [ i ] ; this . fnArr . push ( fn [ i ++ ])){}
11.         }   else {
12.             this . fnArr . push ( fn ) ;
13.         }
14.     } ,
15.     dequeue : function ()   {
16.         //弹出剩余的第一个函数并执行
17.         ( this . fnArr . shift () || function (){})() ;
18.     } ,
19.     clear : function ()   {
20.         this . fnArr = [] ;
21.     }
22. } ;

用法：
用new 创建一个实例：

1. var foo = new myQueue ()

或者带一个函数数组：

1. var foo = new myQueue ([
2.     function ()   {
3.         test . innerHTML += 1 ;
4.         setTimeout ( " foo.dequeue() " , 1000 ) ;
5.     } ,
6.     function ()   {
7.         test . innerHTML += 2 ;
8.         setTimeout ( " foo.dequeue() " , 1000 ) ;
9.     }
10. ]) ;

还可以再添加一组或者一个函数

1. foo . queue ([
2.     function ()   {
3.         test . innerHTML += 3 ;
4.         setTimeout ( " foo.dequeue() " , 1000 ) ;
5.     } ,
6.     function ()   {
7.         test . innerHTML += 4 ;
8.         setTimeout ( " foo.dequeue() " , 1000 ) ;
9.     }
10. ]) ;
11.  
12. foo . queue ( function ()   {
13.     test . innerHTML += 5 ;
14.     setTimeout ( " foo.dequeue() " , 1000 ) ;
15. }) ;

开始执行当前队列中的第一个函数：

1. foo . dequeue () ;

清空队列：

1. foo . clear () ;