jQuery隊(duì)列操作方法實(shí)例

更新時(shí)間：2014年06月11日 08:36:46 作者：

這篇文章主要介紹了jQuery隊(duì)列操作方法實(shí)例,總結(jié)出了一個(gè)簡(jiǎn)潔優(yōu)雅的隊(duì)列控制方法,需要的朋友可以參考下

jQuery核心中, 有一組隊(duì)列控制方法, 這組方法由queue()/dequeue()/clearQueue()三個(gè)方法組成, 它對(duì)需要連續(xù)按序執(zhí)行的函數(shù)的控制可以說(shuō)是簡(jiǎn)明自如, 主要應(yīng)用于animate ()方法, ajax以及其他要按時(shí)間順序執(zhí)行的事件中.

先解釋一下這組方法各自的含義.

queue(name,[callback]): 當(dāng)只傳入一個(gè)參數(shù)時(shí), 它返回并指向第一個(gè)匹配元素的隊(duì)列(將是一個(gè)函數(shù)數(shù)組,隊(duì)列名默認(rèn)是fx); 當(dāng)有兩個(gè)參數(shù)傳入時(shí), 第一個(gè)參數(shù)還是默認(rèn)為fx的的隊(duì)列名, 第二個(gè)參數(shù)又分兩種情況, 當(dāng)?shù)诙€(gè)參數(shù)是一個(gè)函數(shù)時(shí), 它將在匹配的元素的隊(duì)列最后添加一個(gè)函數(shù). 當(dāng)?shù)诙€(gè)參數(shù)是一個(gè)函數(shù)數(shù)組時(shí),它將匹配元素的隊(duì)列用新的一個(gè)隊(duì)列來(lái)代替(函數(shù)數(shù)組).可能, 這個(gè)理解起來(lái)有點(diǎn)暈.

dequeue(name): 這個(gè)好理解, 就是從隊(duì)列最前端移除一個(gè)隊(duì)列函數(shù), 并執(zhí)行它.

clearQueue([queueName]):這是1.4新增的方法. 清空對(duì)象上尚未執(zhí)行的所有隊(duì)列. 參數(shù)可選,默認(rèn)為fx. 但個(gè)人覺(jué)得這個(gè)方法沒(méi)多大用, 用queue()方法傳入兩個(gè)參數(shù)的第二種參數(shù)即可實(shí)現(xiàn)clearQueue方法.

現(xiàn)在, 我們要實(shí)現(xiàn)這樣一個(gè)效果, 有標(biāo)有1至7的數(shù)字方塊, 要求這七個(gè)方塊自左到右依次下落. 查看DEMO
css與html部分我就不貼出來(lái)了, DEMO中有. 若按常規(guī)做法, 可能需要用如下jQ代碼來(lái)實(shí)現(xiàn):

復(fù)制代碼代碼如下:

$('.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('按序落體運(yùn)動(dòng)結(jié)束! Yeah!')
                        });
                    });
                });
            });
        });
    });
});

嗯, 沒(méi)錯(cuò), 效果很完美的呈現(xiàn)給出來(lái)了, 但這種暈眩的代碼, 你能忍受嗎? 即便可以忍受, 如果此時(shí), 你想調(diào)換一個(gè)某個(gè)的執(zhí)行順序, 比如, 你想讓5落下后再開始下落3, 或者新加8至15八個(gè)方塊, 怎么辦? 重寫嗎? 在里面小心冀冀的改嗎? 顯然, 我們需要另外一種列簡(jiǎn)明便捷的方法來(lái)實(shí)現(xiàn)這個(gè)效果, 那就是jQuery隊(duì)列控制方法.請(qǐng)看如下代碼:

復(fù)制代碼代碼如下:

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('按序落體運(yùn)動(dòng)結(jié)束! Yeah!');
    });
}];
$('#demo').queue('slideList', _slideFun);
var _takeOne = function() {
    $('#demo').dequeue('slideList');
};
_takeOne();

這樣一來(lái), 看起來(lái)是不是簡(jiǎn)明多了. 如何實(shí)現(xiàn)?
1. 新建一個(gè)數(shù)組,把動(dòng)畫函數(shù)依次放進(jìn)去(這樣更改順序,新加動(dòng)畫是不是方便多了?);
2. 用queue將這組動(dòng)畫函數(shù)數(shù)組加入到slideList隊(duì)列中;
3. 用dequeue取出slideList隊(duì)列中第一個(gè)函數(shù), 并執(zhí)行它;
4. 初始執(zhí)行第一個(gè)函數(shù).

至于clearQueue()方法,就不多說(shuō)了, 演示中停止按鈕調(diào)用的就是clearQueue()方法,當(dāng)然你還可以用queue()方法直接將現(xiàn)在的函數(shù)列隊(duì)替換成[]空數(shù)組實(shí)現(xiàn)(個(gè)人比較推薦空數(shù)組替換.,更直觀).

您可能感興趣的文章: