jquery的queue实例应用demo

要不是被逼到无奈的地步，我也不想弄这么复杂。 那帮做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" />

 运行效果：