jquery Deferred

Posted 2020-07-26 Leo_wlCnBlogs

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)
})

 

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

 

 

 

标签: javascript, jQuery, Deferred