jquery隊列queue與原生模仿其實現(xiàn)方法分享
queue() 方法顯示或操作在匹配元素上執(zhí)行的函數(shù)隊列。
queue和dequeue的過程主要是：
用queue把函數(shù)加入隊列（通常是函數(shù)數(shù)組）
用dequeue將函數(shù)數(shù)組中的第一個函數(shù)取出，并執(zhí)行(用shift()方法取出并執(zhí)行）
也就意味著當再次執(zhí)行dequeue的時候，得到的是另一個函數(shù)了。同時也意味著，如果不執(zhí)行dequeue，那么隊列中的下一個函數(shù)永遠不會執(zhí)行。
對于一個元素上執(zhí)行animate方法加動畫，jQuery內部也會將其加入名為 fx 的函數(shù)隊列。而對于多個元素要依次執(zhí)行動畫，則必須我們手動設置隊列進行了。
一個例子，要兩個div依次向左移動：
<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("動畫結束")}
];
var aniCB=function() {
$(document).dequeue("myAnimation");
}
$(document).queue("myAnimation",FUNC)
//aniCB();
</script>
我首先建立了一個函數(shù)數(shù)組，里邊是一些列需要依次執(zhí)行的動畫
然后我定義了一個回調函數(shù)，用dequeue方法用來執(zhí)行隊列中的下一個函數(shù)
接著把這個函數(shù)數(shù)組放到document上的myAnimation的隊列中（可以選擇任何元素，我只是為了方便而把這個隊列放在document上）
最后我開始執(zhí)行隊列中的第一個函數(shù)
這樣做的好處在于函數(shù)數(shù)組是線性展開，增減起來非常方便。而且，當不要要繼續(xù)進行接下來動畫的時候(比如用戶點了某個按鈕)，只需要清空那個隊列即可。而要增加更多則只需要加入隊列即可。
//清空隊列
$(document).queue("myAnimation",[]);
//加一個新的函數(shù)放在最后
$(document).queue(“myAnimation”,function(){alert("動畫真的結束了！")});
這當然也可以用于ajax之類的方法，如果需要一系列ajax交互，每個ajax都希望在前一個結束之后開始，之前最原始的方法就是用回調函數(shù)，但這樣太麻煩了。同樣利用queue添加隊列，每次ajax之后的回調中執(zhí)行一次dequeue即可。
jQuery中動畫animate的隊列實現(xiàn)，下面用JavaScript模仿一個：
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滾動到頂部底部是一款簡單的滾動到頂部底部控制。是一個很實用的功能，他能幫助新手和高級開發(fā)者們創(chuàng)造美好的用戶體驗。這里推薦給大家，有需要的小伙伴可以參考下。2015-04-04
jQuery實現(xiàn)感應鼠標動畫效果自動伸長的輸入框實例
這篇文章主要介紹了jQuery實現(xiàn)感應鼠標動畫效果自動伸長的輸入框,實例分析了jQuery鼠標事件及animate動畫效果的使用技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-02-02
jquery實現(xiàn)清新實用的網(wǎng)頁菜單效果
這篇文章主要介紹了jquery實現(xiàn)清新實用的網(wǎng)頁菜單效果,涉及jquery通過鼠標事件控制頁面元素的動態(tài)隱藏與顯示實現(xiàn)技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-08-08
基于Jquery的文字滾動跑馬燈插件(一個頁面多個滾動區(qū))
文字逐行或多行滾動跑馬燈插件，基于Jquery。命名為Jquery.RollTitle。支持在一個頁面聲明多個滾動區(qū) (就為了要這點才寫了這個)2010-07-07
這篇文章主要介紹了jquery實現(xiàn)類似淘寶星星評分功能,詳細介紹了相應jQuery事件的用法實例,需要的朋友可以參考下2014-09-09
jquery實現(xiàn)表格奇數(shù)偶數(shù)行不同樣式(有圖為證及實現(xiàn)代碼)
表格奇數(shù)偶數(shù)行不同樣式,相信很多網(wǎng)友都想試試手吧，由于經(jīng)驗上千所以只能半途而廢，為了響應網(wǎng)友的心聲，本文整理了一些操作技巧，有圖為證，感興趣的朋友可以了解下哦2013-01-01
下面小編就為大家?guī)硪黄猨query取消事件冒泡的三種方法(推薦)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-05-05
jQuery實現(xiàn)的fixedMenu下拉菜單效果代碼
這篇文章主要介紹了jQuery實現(xiàn)的fixedMenu下拉菜單效果代碼,通過自定義fixedMenu方法實現(xiàn)點擊下拉菜單效果,具有一定參考借鑒價值,需要的朋友可以參考下2015-08-08
jquery獲取并修改觸發(fā)事件的DOM元素示例【基于target 屬性】
這篇文章主要介紹了jquery獲取并修改觸發(fā)事件的DOM元素,結合實例形式分析了jQuery基于target 屬性獲取到觸發(fā)該事件的dom并修改的相關操作技巧,需要的朋友可以參考下2019-10-10
jQuery實現(xiàn)鼠標經(jīng)過圖片變亮其他變暗效果
jQuery實現(xiàn)的仿商城圖片變亮變暗效果，鼠標懸停圖片之后該圖片變亮，其他圖片變暗。移開鼠標所有圖片變亮，兼容主流瀏覽器，適用瀏覽器：IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗，有需要的小伙伴可以參考下。2015-05-05