作者TonyQ (自立而後立人。)
看板Ajax
标题[心得] jQuery queue 介绍
时间Mon Apr 16 00:44:58 2012
本篇可以参考：
http://ithelp.ithome.com.tw/question/10090792
-----------------------------------
-----------------------------------
所谓的 queue ，主要是把多个「非同步」的 task 「依序」做完。
（不是说同步不行，只是同步的话，
不需要靠 queue 就会依序做完，不需要特别做 queue 。）
在 jQuery 状况下，queue 主要是拿来作 animation 效果内部实作，
反而不多人会在正式开发用它，一方面是他难懂，
另一方面是使用者还不知道什麽时候该用 queue。
举个例子，以 fadeIn 来讲，
他是将物件显示为显示，并设 opacity 从 0 到 100。
如果我要自己刻一个简易实作，直觉你可能想到要这样作。
http://jsfiddle.net/eqAdS/
[code]
<div id="target" style="width:150px;height:150px;background:red;">
Test
</div>
<script>
var item = $("#target");
item.show();
item.css("opacity",0);
for(var i = 0 ; i < 100 ;++ i){
item.css("opacity", i / 100 );
}
item.html("fadeIn invoked");
</script>
[/code]
但是你会发现看不见效果。
因为 animation 需要有间隔时间，看起来才像 animation，
不然直接从 0 跑个回圈到100 ，时间太短会看不到画面呈现。
那我们下一版改为这样的实作
http://jsfiddle.net/eqAdS/1/
[code]
<div id="target" style="width:150px;height:150px;background:red;">
Test
</div>
<script>
var item = $("#target") , time = 500;
item.show();
item.css("opacity",0);
for(var i = 0 ; i <= 100 ; i +=10){
//use ind to protect variable "i",or it will always be 100
(function(ind){
//put all the process into queue
$("#target").queue("fadeIn",function(){
item.css("opacity", ind/100 );
setTimeout(function(){
//run next item
$("#target").dequeue("fadeIn");
},time); //every 500 ms
});
})(i);
}
$("#target").dequeue("fadeIn"); //start to run items!
item.html("fadeIn invoked");
</script>
[/code]
你会发现这次看起来像样多了，他的原理是假设你有十件事情要做，
你可以先用 $(selector).queue(name,function) 推入指定的 queue ，
但是因为我们知道处理流程通常都是非同步的 (timeout / ajax ...etc )，
那系统怎麽会知道什麽时後要执行下一个呢？ 答案是：它就是不知道。
所以你必须要自己告诉他，当你呼叫 $(selector).dequeue(name) 表示说，
我要开始了或我这一轮作完了，作下一轮吧！
比方说偶尔会有个需求是，我希望先做完 ajax1 ，
确定他做完了再作 ajax2 ，那就会像是以下的 code
[code]
//建立第一个排程，此时还没执行
$("#target").queue("myqueue",function(){
//do something , like ajax
$.post("myurl.php",function(){
//run next queue item after ajax success
$("#target").dequeue("myqueue");
});
});
//建立第二个排程，此时还没执行
$("#target").queue("myqueue",function(){
//do something , like ajax
$.post("myurl2.php",function(){
//run next queue item after ajax success
$("#target").dequeue("myqueue");
});
});
$("#target").dequeue("myqueue");//开始执行
//此时它会开始先跑 myurl.php 的 ajax ，确定 success 有收到回应後，
//再跑 myurl2.php 的ajax。
[/code]
当然他还有一些延伸用法，但这里基於教学立场，
我们就只提到最基本该有的东西：
另外，如果因为某些因素你想清空正在执行的 queue ，
像是jQuery animation 的 stop() ，
你可以 call $(selector).clearQueue("myqueue");
附带一提，jQuery 1.4 以後提供更方便的操作方式，
原本写成
[code]
$("#target").queue("myqueue",function(){
//do something , like ajax
$.post("myurl.php",function(){
//run next queue item after ajax success
$("#target").dequeue("myqueue");
});
});
[/code]
可以改写成
[code]
$("#target").queue("myqueue",function(next){ //内建传入 next 方便作dequeue
//do something , like ajax
$.post("myurl.php",function(){
//run next queue item after ajax success
next(); //用传进来的 next function 取代 dequeue()
});
});
[/code]
所以我们最一开始的 myFadeIn 开发范例就可以变成这样，
写起来可以省下不少力气。
http://jsfiddle.net/eqAdS/2/
[code]
<div id="target" style="width:150px;height:150px;background:red;">
Test
</div>
<script>
var item = $("#target") , time = 500;
item.show();
item.css("opacity",0);
for(var i = 0 ; i <= 100 ; i +=10){
//use ind to protect variable "i",or it will always be 100
(function(ind){
//put all the process into queue
$("#target").queue("fadeIn",function(next){
item.css("opacity", ind/100 );
setTimeout(next,time); //every 500 ms
});
})(i);
}
$("#target").dequeue("fadeIn"); //start to run items!
item.html("fadeIn invoked");
</script>
[/code]
最後讨论 Queue 的主要适用情境：
1.大量同时运算导致网页卡住时，用来作为运算的分流用。
2.操作有相依性，需要等待时
（需确定 A 操作完的结果、状态才能操作B ...etc ）
3.animation
--
Life's a struggle but beautiful.
--
※ 发信站: 批踢踢实业坊(ptt.cc)
◆ From: 114.25.56.138
※ 编辑: TonyQ 来自: 114.25.56.138 (04/16 00:58)
1F：推 nightspirit:ajax如果要做queue的话,可以直接用deferred 04/18 01:08
2F：推 davidsky:deferred好用+1 04/21 04:01
3F：推 epenpal:大推、对我非常有用 05/04 16:47
4F：推 jimpop:泪推这篇~~太赞了!! 06/22 16:31