标签：
在编写jQuery动画时，通过回调函数进行动画队列的编排，但当回调过多，往往会出现这样的代码：
1 $(".box1").fadeIn(1000,function(){ 2 $(".box2").fadeIn(1000,function(){ 3 $(".box3").hide(1000,function(){ 4 // todo xxx 5 }) 6 }) 7 })
那么是否可以将这种层次的回调以链式的写法完成呢？
如：f(fn1).f(fn2).f(fn3)... 表示fn1执行完成后fn2，fn2执行完成后执行fn3，...
下面逐步介绍实现方式：
1、确定结构：
为实现链式调用，需要f()的返回值一个包含其本身的对象
function f(n){ var obj = {}; obj.f = f; return obj; }
这样就构造好了链式调用的基本结构。
尝试加入参数：
function f(n){ console.log(n); var obj = {}; obj.f = function(m){return f(m);}; return obj; }
与我们预想的结果相同，但如结果所见，f调用()会立即将参数代入执行。现在增加一个需求，希望f().f().f()...仅表示一个序列，真正的执行需要我下达其他命令后才发生。于是我们需要在f()的obj中加入一个函数run()，此函数用来下达执行指令，修改代码如下：
1 function f(n){ 2 var obj = {}; 3 obj.f = function(m){return f(m);}; 4 obj.run = function(){ 5 console.log(n) 6 } 7 return obj; 8 }
可以看到，在我们原先的代码并没有输出结果，而当我们执行run()后会怎样呢？
可以看到仅输出了第三次结果，这是因为run()并没有保存前两次f()参数的值，我们期望的将三次f()一并执行，实际上仅仅执行了第三次。那么如何解决这个问题呢，换句话说：如何在run()中保存所有之前获得的f()的参数呢？
2、保存参数：
我们知道，函数通过参数获得函数外部变量的值，这里我们就通过这种方式保存f()的所有参数，代码修改如下：
1 function f(n,fn){ 2 var obj = {}; 3 obj.arr = fn===undefined?[]:[fn]; 4 obj.arr.push(n); 5 obj.f = function(m){return f(m,n);}; 6 obj.run = function(){ 7 $.each(obj.arr,function(i,fn){ 8 fn(); 9 }); 10 } 11 return obj; 12 }
f()中添加obj.arr数组，用来保存所有传入的参数，而run()统一执行所有传入的参数，f()的第二个参数为上一次传入的参数，这样上一次执行所需的参数就被保存了下来。我们将传入的参数换成函数，用如下代码测试：
可以看到这正是我们想要的结果。
再次向后追加，希望输出1 2 3，但实际只输出后两次结果，原因在于f()的第二个参数仅保存了上一次传入的参数，而不是前几次的
f()的第二个参数为数组，用来保存前几次已传入的参数，修改代码如下：
function f(n,ar){ var obj = {}; obj.arr = ar===undefined?[]:ar; obj.arr.push(n); obj.f = function(m){return f(m,obj.arr);}; obj.run = function(){ $.each(obj.arr,function(i,fn){ fn(); }); } return obj; }
再次执行之前的代码，已符合预期。
3、执行回调
f( function () { $(".box1").fadeIn(1000); } ).f( function () { $(".box2").fadeIn(1000); } ).run();
执行上述代码，我们希望看到的是box1用1秒淡入，这个动画执行完后，box2开始执行1秒淡入，但实际上，这两个动画几乎是同时执行，所以接下来的关键是如何执行回调。修改测试代码如下：
f( function (cb1) { $(".box1").fadeIn(1000,cb1); } ).f( function (cb2) { $(".box2").fadeIn(1000,cb2); } ).run();
我们看到，cb1和cb2分别为box1和box2执行动画的回调函数，也就是说，我们希望达到这样的效果：在cb1中，执行box2的动画，在cb2中执行后面的动画（如果有），即：需要在cb中下达执行下一个f()中函数的指令。而run()仅仅是控制f()当前携带函数的执行，修改代码如下：
function f(n,ar){ var obj = {}; obj.arr = ar===undefined?[]:ar; obj.arr.push(n); obj.f = function(m){return f(m,obj.arr);}; obj.run = function(){ var fn = obj.arr.shift(); if(typeof fn === "function") fn(callback); } function callback(){ obj.run(); } return obj; }
f( function (cb) { $(".box1").fadeIn(1000,cb); } ).f( function (cb) { $(".box2").fadeIn(1000,cb); } ).run();
再次执行以上代码进行测试，实现box1执行完成后执行box2，目标实现
标签：
原文地址：http://www.cnblogs.com/hyaaon/p/4324153.html
