07 六月 2009 @ 1:47 上午
jQuery有個很方便的function：toggle，可以讓元素做指定的切換動作，若不指定任何參數，則可以讓元素做很簡單的隱藏、顯示的切換，很是方便。If they are shown, toggle makes them hidden (using the hide method). If they are hidden, toggle makes them shown (using the show method).
但今天突然發現在針對大量元素的隱藏顯示時，這個function效能很差。
看範例（另開視窗）
第一種方式是click之後再跑一個for loop讓所有元素做toggle，很明顯的這個方式效能很差(用IE開更是慢到離譜~)。範例裡頭的element有600個。
function dividend_toggle(){
$(".dividend").toggle();
dividend_toggled = !dividend_toggled;
$("#toggler").html(dividend_toggled?'hide':'show');
}
$("#toggler").click(dividend_toggle);
第二種方式是利用toggle的切換直接決定show and hide，效能上就比第一種方式好多了。
$("#toggler2").toggle(function(){
$("td.dividend").hide();
$(this).html('show');
}, function(){
$("td.dividend").show();
$(this).html('hide');
});
其實這是一個觀念上的陷阱，toggle()交由元素自己判斷顯示還是隱藏，在很多場合是非常方便的，但元素一多就會發生效能上的問題，因為你把顯示還是隱藏的決定權交給元素去判斷，當元素一多，每個元素都要重複判斷。以下是jquery1.3.2的toggle的片段原始碼：
this.each(function(){
var state = bool ? fn : jQuery(this).is(":hidden");
jQuery(this)[ state ? "show" : "hide" ]();
}) :
see that?每次都要判斷元素是否被隱藏，然後再決定show or hide。
這也是為何在大量做toggle時效能會差的原因。因此在大量元素的顯示或隱藏時，不要使用toggle來讓元素自己決定要顯示或隱藏。換句話說，當要決定兩個以上元素的顯示或隱藏時，這個「決定」(boolean值)就應該被存起來，而不應該再下一個元素還要再判斷這個決定。
Previous 
Next 
Categories
Tag Cloud
Blog RSS
Comments RSS
Last 50 Posts
Back
Void 
Life 
Earth 
Wind 
Water 
Fire