jQuery佇列操作方法實例_jquery

jQuery核心中, 有一組隊列控制方法, 這組方法由queue()/dequeue()/clearQueue()三個方法組成, 它對需要連續按序執行的函數的控制可以說是簡明自如, 主要應用於animate ()方法, ajax以及其他要按時間順序執行的事件中.

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

queue(name,[callback] ): 當只傳入一個參數時, 它返回並指向第一個匹配元素的隊列(將是一個函數數組,隊列名默認是fx); 當有兩個參數傳入時, 第一個參數還是默認為fx的的隊列名, 第二個參數又分兩種情況, 當第二個參數是一個函數時, 它將在匹配的元素的隊列最後添加一個函數. 當第二個參數是一個函數數組時,它將匹配元素的隊列用新的一個隊列來代替(函數數組).可能, 這個理解起來有點暈.

dequeue(name): 這個好理解, 就是從隊列最前端移除一個佇列函數, 並執行它.

clearQueue([queueName]):這是1.4新增的方法. 清空物件上尚未執行的所有佇列. 參數可選,預設為fx. 但個人覺得這個方法沒多大用, 用queue()方法傳入兩個參數的第二種參數即可實現clearQueue方法.

現在, 我們要實現這樣一個效果, 有標有1至7的數字方塊,要求這七個方塊自左到右依序下落. 查看DEMO
css與html部分我就不貼出來了, DEMO中有. 若按常規做法, 可能需要用如下jQ代碼來實現:

複製程式碼 程式碼如下:

$('.one').delay(500).animate({
    top: ' =270px'
},
500,
function(>},
500,
function() {
    $('.two').delay(500).animate({
        top: ' =270px'
    },
      $('.三').delay(500).animate({
            top: ' =270px'
       function() {
            $('.four').delay (500).animate({
                top: ' =270px'
      🎜>            function() {
                $('.五').delay(500). ({
                    top: ' =270px'
         500,
                function() {
                       },
                   function() {
                                top: ' =270px'
                            ,
                        500,
                               alert('依序落體運動結束！是的！')
                   });
              >            });
        });
    });
});


🎜>🎜>🎜>🎜>🎜>🎜>🎜>🎜>🎜>🎜>🎜>🎜>🎜>🎜>🎜>

嗯，簡單，效果很完美的表現出來了，但是這種暈厥的代碼，你能忍受嗎？甚至可以忍受，如果這個時候，你想調整換一個某個的執行順序，比如說，你讓5落下然後開始下落3，或者新加8至15個八個方塊，怎麼辦？方法來實現這個效果，那就是jQuery佇列控制方法。




複製程式碼


程式碼如下：

var _slideFun = [function() {
    $('.one').delay(500).animate({
      500, _takeOne);
},
function() {
    $('.two').delay(300).animate({
   
    500, _takeOne);
},
function() {
    $('.三').delay top >    },
    500, _takeOne);
},
function() {
    $ '
    },
    500, _takeOne);
},
function() {
    $('.五').delay(300) 2098>  ' =270px'
    },
    500, _takeOne);
},
function(() {
   $('.ss]).del(3) {
  >        top: ' =270px'
    },
    500, _takeOne);
},
function() {<.>        top: ' =270px'
    },
    500,
    function() {}];
$('#demo').queue('slideList', _slideFun);
var _takeOne = function() {
    $('#demo').dequeue(' SlideList');
};
_takeOne();




這樣的身材，看起來已經不是簡明多了。 新建一個佇列，把動畫函數依序去（這樣改變順序，新加動畫不是方便多了？）；
2. 使用佇列將這組動畫函數加入slideList佇列;
3. 使用dequeue取出slideList佇列中第一個函數，並執行它；
4. 最初執行第一個函數。
至於clearQueue()方法，就不說了，練習中停止呼叫按鈕的就是clearQueue()方法，當然你還可以用queue()方法直接將現在的函數列隊替換成[]空隊列實現(個人)比較推薦空倉庫替換.,更直觀).