这周做了个小活动(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)
})
于是这个业务也完成了,废话也讲完了