jQuery.queue : O3noBLOG

02月 23日

jQuery.queue

jQuery 的 queue 是存在很久的東西了，不過我到最近才去了解它到底是用來作什麼的，其實，基本上就和一般的 queue 一樣，只是 jQuery 預設使用它來處理所有的動畫效果的順序，像是 fadeIn、fadeOut 還有最重要的 animate ，這些特效的動作都會丟到一個叫 fx 的 queue 裡面，然後照順序執行，所以下面的程式碼會讓一個元素先 fade in 再 fade out，而不會發生兩個動畫效果打架的情形：

$('#id').fadeIn().fadeOut();

也不用寫成 callback function 的方式：

$('#id').fadeIn(function () {
    $(this).fadeOut();
});

如果你是要把元素 fade out，然後改裡面文字後再讓它 fade in，以前用 callback 的寫法會寫成：

$('#id').fadeOut(function () {
    $(this).html('new content');
    $(this).fadeIn();
});

但是好一點的作法應該善用 queue：

$('#id')
    .fadeOut()
    .queue(function () {
        $(this).html('new content');
        $(this).dequeue();
    })
    .fadeIn();

這樣不知道看不看的出好在哪？讓我來把要做的動作複雜一點好了，我要淡出，改內容，淡入，然後接著右移 500px、加上 active 的 class，再移動回來，然後再把內容改變一次，用 callback 的寫法：

$('#id').fadeOut(function () {
    $(this).html('new content');
    $(this).fadeIn(function () {
        $(this).animate({left: '+=500'}, function () {
            $(this).addClass('active');
            $(this).animate({left: '-=500'}, function () {
                $(this).html('even new content');
            });
        });
    });
});

如果用 queue：

$('#id')
    .fadeOut()
    .queue(function () {
        $(this).html('new content');
        $(this).dequeue();
    })
    .fadeIn()
    .animate({left: '+=500'})
    .queue(function () {
        $(this).addClass('active');
        $(this).dequeue();
    })
    .animate({left: '-=500'})
    .queue(function () {
        $(this).html('even new content');
        $(this).dequeue();
    });

眼尖的人大概馬上就可以發現，用 queue 程式碼變多了！不過這其實不是重點，重點其實是縮排的階層減少了，而且使用 queue 的程式碼，看起來就是一個步驟接著一個步驟，和使用 callback 的階層的關係不一樣，而且除了看起來比較好之外其實還有不少優點，首先是如果要修改連續動作的順序或是內容，使用 queue 的顯然比較簡單，二是還可以配合 delay 來讓動作之間有個暫停，三是可以用 clearQueue 來把整串動作清掉，用 callback 的話，因為執行到各個 animate 的時間不是同步的，所以用 clearQueue 可能會清不乾淨。所以在使用 jQuery 動畫效果時，正確的配合 queue 來做，會讓程式碼的可維護度提昇許多，大家都應該來用一下～

單篇彙整