当前位置: 代码迷 >> Web前端 >> jquery的queue范例应用demo
  详细解决方案

jquery的queue范例应用demo

热度:276   发布时间:2013-02-24 17:58:57.0
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" />

?运行效果:



?

  相关解决方案