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