jquery Deferred使用经验

这周做了个小活动（http://aoqi.100bt.com/zt-2016duanzi/index.html），刚开始时候没看好需求，逻辑都写一块了

最后各种坑要填补，从中也获取了些经验和教训，下面说说这里会用到的$.Deferred；

关于jquery里面的deferred的基本使用方法，阮一峰大婶已经有文章说明了，链接如下：

http://www.ruanyifeng.com/blog/2011/08/a_detailed_explanation_of_jquery_deferred_object.html

这里就说说里面没提及的吧：

页面中逻辑比较麻烦的就是获奖名单的渲染问题，如下图

 

这里需要的逻辑是：

1、获取时间，判断是否有活动过了投票时间，没有则不可点击，页面不渲染

2、过来时间后，判断能否获取到获奖名单，获取到就渲染次阶段的页面，获取不到则渲染前一个阶段的页面，

　　前一个阶段的页面还是获取不到则往前回溯，如果到第一个阶段还是没有则页面不渲染。

假设四个页面对应的获奖名单是1.html、2.html、3.html、4.html；

假如此时有时间判断活动时间已经在第四阶段，即是前三个阶段都结束，我们的实现逻辑或许是

$.get('3.html').done(function(){
    //渲染页面
}).fail(function (argument) {
    $.get('2.html').done(function (argument) {
        //渲染页面
    }).fail(function (argument) {
        function (argument) {
            $.get('1.html').done(function (argument) {
                // 渲染页面
            }).fail(function (argument) {
                // 不渲染页面
            })
        }
    })
})

这是很不可取的，在每个不同的阶段都要嵌套一次，而且每个请求都要等上一个请求发完才发，太慢了。。。

于是就改成类似下面的

var linkArr = ['1.html','2.html','3.html','4.html']
$nav.each(function(index, el) {
    var $self = $(this);
    $.get(index+'.html').done(function (argument) {
         $self.text('获奖名单出来了')
     }).fail(function (argument) {
         $self.addClass('graynav').text('敬请期待');
     });
});

能“并行”地发出多个请求，看似不错，然后在添加点击渲染事件，点击不同的nav渲染已经出来的相应获奖名单，嗯，这也是逻辑上需要的

$('.aCommon_nav').click(function(event) {
    if($(this).hasClass('graynav')){
        return false;
    }
    var i = $('aCommon_nav').index($(this));
    $.get(linkarr[i], function(data) {
        $inforWrap.html(data)
    });
});

这时候，我们只需在“并发”请求结束后调用最后一个可点的nav就完成了。。真赞

可是安装现在这种写法，我们并不能判断是否已经完成了请求，或许需要维护个全局变量num，在每次fail和done再加1，当num等于需要发送的个数之后再调用函数

var linkArr = ['1.html','2.html','3.html','4.html']
var i = 0;
$nav.each(function(index, el) {
    var $self = $(this);
    if($self.attr('xxx')<=timenum){//由时间判断出的是已经结束的标志
        $.get(index+'.html').done(function (argument) {
             i++;
             $self.text('获奖名单出来了');
             if(i==LEN){
                 //DoClickEvent()
             }
         }).fail(function (argument) {
              i++;
             $self.addClass('graynav').text('敬请期待');
              if(i==LEN){
                 //DoClickEvent()
             }
         });
     }
});

此时就已经基本完成了此次逻辑了，但是代码实在太糙，需要改进下，下面就用when来完成吧~

var linkArr = ['1.html','2.html','3.html','4.html'],
    deferredArr = [];
$('.aCommon_nav').each(function(index, el) {
    var $self = $(this);
    if($self.attr('xxx')<=timenum){//由时间判断出的是已经结束的标志
        deferredArr.push($.get(index+'.html').done(function (argument) {
             $self.text('获奖名单出来了');
         }).fail(function (argument) {
             $self.addClass('graynav').text('敬请期待');
         }))    
     }
});

$.when.apply(null,deferredArr).always(function(arg){
    $('.aCommon_nav:not(.garynav)').last().click();
})

这时候，貌似完成了这个逻辑，but,调试之后发现有时候先执行完done,然后fail然后always然后又done，貌似这顺序有些乱来了。。。

然而我们希望的是先done或者fail最后执行always。

发现原因是绑定顺序导致的，于是发现了两条路走，

第一条，把done和fail逻辑都写在always里面，如下

$.when.apply(null,defferredArr).always(function(arg){
    $.each(arguments, function(index, val) {
        val.done(function (argument) {
             $self.text('获奖名单出来了');
         }).fail(function (argument) {
             $self.addClass('graynav').text('敬请期待');
         })
    });
    $('.aCommon_nav:not(.garynav)').last().click();
})

这感觉好赞，deferred的回调函数都写一块了，维护起来也开心。

但是当deferredArr里面只有一个元素的时候，发现报错了，好尴尬，只能断点看看，

发现always回调函数里面的arguments竟然是一个数组，第一项是请求返回的数据，第二个是返回状态，第三个是此次请求的deferred对象，

于是我们要加个判断，或加个try.catch包裹着done和fail，代码就不贴了，是在太糊弄了。

 

第二条路，使用setTimeout的黑魔法

var linkArr = ['1.html','2.html','3.html','4.html'],
    deferredArr = [];
$('.aCommon_nav').each(function(index, el) {
    var $self = $(this);
    if($self.attr('xxx')<=timenum){//由时间判断出的是已经结束的标志
        deferredArr.push($.get(index+'.html').done(function (argument) {
             $self.text('获奖名单出来了');
         }).fail(function (argument) {
             $self.addClass('graynav').text('敬请期待');
         }))    
     }
});

$.when.apply(null,deferredArr).always(function(arg){
    setTimeout(function (argument) {
        $('.aCommon_nav:not(.garynav)').last().click();
    },0)
})

 

于是这个业务也完成了，废话也讲完了