要不是被逼到无奈的地步,我也不想弄这么复杂。 那帮做java开发的真不好沟通,本来他们那边处理好了给我一个完整的数据结构就可以了,但是现在我拿到他们给的不完整的数据结构,还需要根据每次解析遍历的值去额外请求数据,如果直接发起异步请求,代码写的又不太优雅;如果发同步请求,服务一直处于等待状态,体验性又不太好。
基于这样的前提,我就想到了用队列来实现,算是稍微优雅一点吧
Js代码部分:
?
// 定义函数执行队列
var aFun = [];
$(function(){
$("input[name='test']").click(function(){
begin_queue();
$(document).queue("testQueue", aFun);
$(document).dequeue("testQueue");
});
});
//初始化队列
function begin_queue()
{
var obj = $("input[type='hidden']");
obj.each(function(i){
var $this = $(this), $val = $this.val();
var queue_fun = function(){
callback($this, $val);
};
//压入函数队列
aFun.push(queue_fun);
});
}
//每次遍历回调处理
function callback(elm, data)
{
var str = $("#queue").html() + elm.attr("no") + ":" + data * data + "<br>";
$("#queue").html(str);
//继续执行队列中下一个函数
$(document).dequeue("testQueue");
}
?HTML结构部分:
<div id="queue"></div> <input type="hidden" class="required" name="star.key" no="1" value="1" /> <input type="hidden" class="required" name="star.key" no="2" value="2" /> <input type="hidden" class="required" name="star.key" no="3" value="3" /> <input type="hidden" class="required" name="star.key" no="4" value="4" /> <input type="hidden" class="required" name="star.key" no="5" value="5" /> <input type="hidden" class="required" name="star.key" no="6" value="6" /> <input name="test" type="button" value="Start" />
?运行效果:

?