jquery隊(duì)列queue與原生模仿其實(shí)現(xiàn)方法分享
queue() 方法顯示或操作在匹配元素上執(zhí)行的函數(shù)隊(duì)列。
queue和dequeue的過程主要是：
用queue把函數(shù)加入隊(duì)列（通常是函數(shù)數(shù)組）
用dequeue將函數(shù)數(shù)組中的第一個(gè)函數(shù)取出，并執(zhí)行(用shift()方法取出并執(zhí)行）
也就意味著當(dāng)再次執(zhí)行dequeue的時(shí)候，得到的是另一個(gè)函數(shù)了。同時(shí)也意味著，如果不執(zhí)行dequeue，那么隊(duì)列中的下一個(gè)函數(shù)永遠(yuǎn)不會(huì)執(zhí)行。
對(duì)于一個(gè)元素上執(zhí)行animate方法加動(dòng)畫，jQuery內(nèi)部也會(huì)將其加入名為 fx 的函數(shù)隊(duì)列。而對(duì)于多個(gè)元素要依次執(zhí)行動(dòng)畫，則必須我們手動(dòng)設(shè)置隊(duì)列進(jìn)行了。
一個(gè)例子，要兩個(gè)div依次向左移動(dòng)：
<div id="block1">div 1</div>
<div id="block2">div 2</div>
<script type="text/javascript">
var FUNC=[
function() {$("#block1").animate({color:"=blue"},aniCB);},
function() {$("#block2").animate({color:"=red"},aniCB);},
function() {$("#block1").animate({color:"=yellow"},aniCB);},
function() {$("#block2").animate({color:"=grey"},aniCB);},
function() {$("#block1").animate({color:"=green"},aniCB);},
function(){alert("動(dòng)畫結(jié)束")}
];
var aniCB=function() {
$(document).dequeue("myAnimation");
}
$(document).queue("myAnimation",FUNC)
//aniCB();
</script>
我首先建立了一個(gè)函數(shù)數(shù)組，里邊是一些列需要依次執(zhí)行的動(dòng)畫
然后我定義了一個(gè)回調(diào)函數(shù)，用dequeue方法用來執(zhí)行隊(duì)列中的下一個(gè)函數(shù)
接著把這個(gè)函數(shù)數(shù)組放到document上的myAnimation的隊(duì)列中（可以選擇任何元素，我只是為了方便而把這個(gè)隊(duì)列放在document上）
最后我開始執(zhí)行隊(duì)列中的第一個(gè)函數(shù)
這樣做的好處在于函數(shù)數(shù)組是線性展開，增減起來非常方便。而且，當(dāng)不要要繼續(xù)進(jìn)行接下來動(dòng)畫的時(shí)候(比如用戶點(diǎn)了某個(gè)按鈕)，只需要清空那個(gè)隊(duì)列即可。而要增加更多則只需要加入隊(duì)列即可。
//清空隊(duì)列
$(document).queue("myAnimation",[]);
//加一個(gè)新的函數(shù)放在最后
$(document).queue(“myAnimation”,function(){alert("動(dòng)畫真的結(jié)束了！")});
這當(dāng)然也可以用于ajax之類的方法，如果需要一系列ajax交互，每個(gè)ajax都希望在前一個(gè)結(jié)束之后開始，之前最原始的方法就是用回調(diào)函數(shù)，但這樣太麻煩了。同樣利用queue添加隊(duì)列，每次ajax之后的回調(diào)中執(zhí)行一次dequeue即可。
jQuery中動(dòng)畫animate的隊(duì)列實(shí)現(xiàn)，下面用JavaScript模仿一個(gè)：
function Queue(){
this.a = [];
this.t = null;
}
Queue.prototype = {
queue:function(s){
var self = this;
this.a.push(s);
this.hold();
return this;
},
hold:function(){
var self = this;
clearTimeout(this.t);
this.t = setTimeout(function(){
console.log("Queue start! ",self.a);
self.dequeue();
},0);
},
dequeue:function(){
var s = this.a.shift(),self = this;
if(s){
console.log("s:"+s);
setTimeout(function(){
console.log("end:"+s);
self.dequeue();
},s);
}
}
};
var a = new Queue().queue(500).queue(200).queue(400).queue(1500).queue(300).queue(2000);
- jQuery隊(duì)列控制方法詳解queue()/dequeue()/clearQueue()
- jQuery中queue()方法用法實(shí)例
- jQuery中隊(duì)列queue()函數(shù)的實(shí)例教程
- jQuery 事件隊(duì)列調(diào)整方法
- jquery隊(duì)列函數(shù)用法實(shí)例
- 用隊(duì)列模擬jquery的動(dòng)畫算法實(shí)例
- 利用Jquery隊(duì)列實(shí)現(xiàn)根據(jù)輸入數(shù)量顯示的動(dòng)畫
- jQuery使用動(dòng)畫隊(duì)列自定義動(dòng)畫操作示例
- JQuery中queue方法用法示例
相關(guān)文章
jquery滾動(dòng)到頂部底部是一款簡(jiǎn)單的滾動(dòng)到頂部底部控制。是一個(gè)很實(shí)用的功能，他能幫助新手和高級(jí)開發(fā)者們創(chuàng)造美好的用戶體驗(yàn)。這里推薦給大家，有需要的小伙伴可以參考下。2015-04-04
jquery實(shí)現(xiàn)清新實(shí)用的網(wǎng)頁菜單效果
基于Jquery的文字滾動(dòng)跑馬燈插件(一個(gè)頁面多個(gè)滾動(dòng)區(qū))
jquery實(shí)現(xiàn)類似淘寶星星評(píng)分功能實(shí)例
jquery實(shí)現(xiàn)表格奇數(shù)偶數(shù)行不同樣式(有圖為證及實(shí)現(xiàn)代碼)
jQuery實(shí)現(xiàn)的fixedMenu下拉菜單效果代碼
jquery獲取并修改觸發(fā)事件的DOM元素示例【基于target 屬性】
jQuery實(shí)現(xiàn)鼠標(biāo)經(jīng)過圖片變亮其他變暗效果