jQuery佇列控制方法詳解queue()/dequeue()/clearQueue()
jQuery 遍歷 - jQuery.queue() 方法: [url]http://www.w3school.com.cn/jquery/data_jquery_queue.asp[/url]
jQuery中queue和dequeue的用法 [url]http://blog.csdn.net/hdchangchang/article/details/8085887[/url]
原文:[url]http://mrthink.net/jqueryapi-queue-dequeue/[/url]
jQuery核心中, 有一組佇列控制方法, 這組方法由queue()/dequeue()/clearQueue()三個方法組成, 它對需要連續按序執行的函式的控制可以說是簡明自如, 主要應用於animate ()方法, ajax以及其他要按時間順序執行的事件中.
先解釋一下這組方法各自的含義.
[color=red][b]queue(name,[callback]): [/b][/color]
1.當只傳入一個引數時, 它返回並指向第一個匹配元素的佇列(將是一個函式陣列,佇列名預設是fx);
2.當有兩個引數傳入時, 第一個引數還是預設為fx的的佇列名, 第二個引數又分兩種情況,
A: 當第二個引數是一個函式時, 它將在匹配的元素的佇列最後[b][color=blue]新增[/color][/b]一個函式.
B: 當第二個引數是一個函式陣列時,它將匹配元素的佇列用新的一個佇列來[color=darkblue][b]代替[/b][/color](函式陣列).可能, 這個理解起來有點暈, 稍後, 後面會有點此檢視DEMO.
[color=red][b]dequeue(name):[/b][/color] 這個好理解, 就是從佇列最前端[color=darkblue][b]移除[/b][/color]一個佇列函式, [color=darkblue][b]並執行它[/b][/color].
[b][color=red]clearQueue([queueName]):[/color][/b]這是1.4新增的方法. 清空物件上尚未執行的所有佇列. 引數可選,預設為fx. 但個人覺得這個方法沒多大用, 用queue()方法傳入兩個引數的第二種引數即可實現clearQueue方法.
現在, 我們要實現這樣一個效果, 有標有1至7的數字方塊, 要求這七個方塊自左到右依次下落.
Demo:[url]http://mrthink.net/demo/ijq20101129.htm[/url]
[img]http://mrthink.net/wp-content/uploads/2010/11/20101129.png[/img]
css與html部分我就不貼出來了,DEMO演示中有. 若按常規做法, 可能需要用如下jQ程式碼來實現:
嗯, 沒錯, 效果很完美的呈現給出來了, 但這種暈眩的程式碼, 你能忍受嗎? 即便可以忍受, 如果此時, 你想調換一個某個的執行順序, 比如, 你想讓5落下後再開始下落3, 或者新加8至15八個方塊, 怎麼辦? 重寫嗎? 在裡面小心冀冀的改嗎? 顯然, 我們需要另外一種列簡明便捷的方法來實現這個效果, 那就是jQuery佇列控制方法.請看如下程式碼:
這樣一來, 看起來是不是簡明多了. 如何實現?
1. 新建一個陣列,把動畫函式依次放進去(這樣更改順序,新加動畫是不是方便多了?);
2. 用queue將這組動畫函式陣列加入到slideList佇列中;
3. 用dequeue取出slideList佇列中第一個函式, 並執行它;
4. 初始執行第一個函式.
DEMO演示中也有詳解的註釋, 如果上面的說明還看不明白,請看原始碼.
至於clearQueue()方法,就不多說了, 演示中停止按鈕呼叫的就是clearQueue()方法,當然你還可以用queue()方法直接將現在的函式列隊替換成[]空陣列實現(個人比較推薦空陣列替換.,更直觀).
jQuery中queue和dequeue的用法 [url]http://blog.csdn.net/hdchangchang/article/details/8085887[/url]
原文:[url]http://mrthink.net/jqueryapi-queue-dequeue/[/url]
jQuery核心中, 有一組佇列控制方法, 這組方法由queue()/dequeue()/clearQueue()三個方法組成, 它對需要連續按序執行的函式的控制可以說是簡明自如, 主要應用於animate ()方法, ajax以及其他要按時間順序執行的事件中.
先解釋一下這組方法各自的含義.
[color=red][b]queue(name,[callback]): [/b][/color]
1.當只傳入一個引數時, 它返回並指向第一個匹配元素的佇列(將是一個函式陣列,佇列名預設是fx);
2.當有兩個引數傳入時, 第一個引數還是預設為fx的的佇列名, 第二個引數又分兩種情況,
A: 當第二個引數是一個函式時, 它將在匹配的元素的佇列最後[b][color=blue]新增[/color][/b]一個函式.
B: 當第二個引數是一個函式陣列時,它將匹配元素的佇列用新的一個佇列來[color=darkblue][b]代替[/b][/color](函式陣列).可能, 這個理解起來有點暈, 稍後, 後面會有點此檢視DEMO.
[color=red][b]dequeue(name):[/b][/color] 這個好理解, 就是從佇列最前端[color=darkblue][b]移除[/b][/color]一個佇列函式, [color=darkblue][b]並執行它[/b][/color].
[b][color=red]clearQueue([queueName]):[/color][/b]這是1.4新增的方法. 清空物件上尚未執行的所有佇列. 引數可選,預設為fx. 但個人覺得這個方法沒多大用, 用queue()方法傳入兩個引數的第二種引數即可實現clearQueue方法.
現在, 我們要實現這樣一個效果, 有標有1至7的數字方塊, 要求這七個方塊自左到右依次下落.
Demo:[url]http://mrthink.net/demo/ijq20101129.htm[/url]
[img]http://mrthink.net/wp-content/uploads/2010/11/20101129.png[/img]
css與html部分我就不貼出來了,DEMO演示中有. 若按常規做法, 可能需要用如下jQ程式碼來實現:
$('.one').delay(500).animate({top:'+=270px'},500,function(){
$('.two').delay(500).animate({top:'+=270px'},500,function(){
$('.three').delay(500).animate({top:'+=270px'},500,function(){
$('.four').delay(500).animate({top:'+=270px'},500,function(){
$('.five').delay(500).animate({top:'+=270px'},500,function(){
$('.six').delay(500).animate({top:'+=270px'},500,function(){
$('.seven').animate({top:'+=270px'},500,function(){
alert('按序落體運動結束! Yeah!')
});
});
});
});
});
});
});
嗯, 沒錯, 效果很完美的呈現給出來了, 但這種暈眩的程式碼, 你能忍受嗎? 即便可以忍受, 如果此時, 你想調換一個某個的執行順序, 比如, 你想讓5落下後再開始下落3, 或者新加8至15八個方塊, 怎麼辦? 重寫嗎? 在裡面小心冀冀的改嗎? 顯然, 我們需要另外一種列簡明便捷的方法來實現這個效果, 那就是jQuery佇列控制方法.請看如下程式碼:
var _slideFun=[
function(){$('.one').delay(500).animate({top:'+=270px'},500,_takeOne);},
function(){$('.two').delay(300).animate({top:'+=270px'},500,_takeOne);},
function(){$('.three').delay(300).animate({top:'+=270px'},500,_takeOne);},
function(){$('.four').delay(300).animate({top:'+=270px'},500,_takeOne);},
function(){$('.five').delay(300).animate({top:'+=270px'},500,_takeOne);},
function(){$('.six').delay(300).animate({top:'+=270px'},500,_takeOne);},
function(){$('.seven').delay(300).animate({top:'+=270px'},500,function(){
alert('按序落體運動結束! Yeah!');
});}
];
$('#demo').queue('slideList',_slideFun);
var _takeOne=function(){
$('#demo').dequeue('slideList');
};
_takeOne();
這樣一來, 看起來是不是簡明多了. 如何實現?
1. 新建一個陣列,把動畫函式依次放進去(這樣更改順序,新加動畫是不是方便多了?);
2. 用queue將這組動畫函式陣列加入到slideList佇列中;
3. 用dequeue取出slideList佇列中第一個函式, 並執行它;
4. 初始執行第一個函式.
DEMO演示中也有詳解的註釋, 如果上面的說明還看不明白,請看原始碼.
至於clearQueue()方法,就不多說了, 演示中停止按鈕呼叫的就是clearQueue()方法,當然你還可以用queue()方法直接將現在的函式列隊替換成[]空陣列實現(個人比較推薦空陣列替換.,更直觀).
相關文章
- jQuery.queue()和clearQueue()jQuery
- Python3 queue佇列模組詳解Python佇列
- 用棧實現佇列,實現Enqueue和Dequeue方法佇列ENQ
- jQuery clearQueue()jQuery
- jQuery dequeue()jQuery
- JDK QUEUE佇列JDK佇列
- Team Queue(佇列)佇列
- python佇列QueuePython佇列
- C# 佇列(Queue)C#佇列
- 佇列(Queue)-c實現佇列
- STL(十九)queue佇列容器佇列
- [筆記] 解碼Nginx:雙向佇列(Queue)筆記Nginx佇列
- 看動畫學演算法之:雙向佇列dequeue動畫演算法佇列
- laravel原始碼分析-佇列QueueLaravel原始碼佇列
- 資料結構之佇列(Queue)資料結構佇列
- java Queue佇列相關總結Java佇列
- js資料結構--佇列(queue)JS資料結構佇列
- Team Queue (佇列的一種應用)佇列
- POJ 2259 Team Queue【模擬佇列】佇列
- 29_檢查點佇列(checkpoint queue)佇列
- jQuery queue()jQuery
- java集合類——Stack棧類與Queue佇列Java佇列
- Throwing cards away I(queue迴圈佇列)佇列
- 【資料結構】棧(Stack)和佇列(Queue)資料結構佇列
- 看動畫學演算法之:佇列queue動畫演算法佇列
- STL(二十)priority_queue優先佇列容器佇列
- 訊息佇列(Message Queue)基本概念佇列
- python的queue佇列獲取資料Python佇列
- C++ STL 優先佇列 (priority_queue)C++佇列
- jQuery stop()方法用法詳解jQuery
- JAVA中常見的阻塞佇列詳解Java佇列
- 訊息佇列ActiveMQ的使用詳解佇列MQ
- 圖解--佇列、併發佇列圖解佇列
- jQuery 動畫效果 與 動畫佇列jQuery動畫佇列
- jQuery的bind()方法用法詳解jQuery
- jQuery Ajax get post 方法詳解jQuery
- 分散式任務 + 訊息佇列框架 go-queue分散式佇列框架Go
- Java集合(七) Queue詳解Java