jquery chaining vs回調

對於jQuery，以下兩個片段的結果有什麼不同。什麼？我是否正確回覆和鏈中的第二項都是在第一個動畫完成時執行的？jquery chaining vs回調

$(selector).animate({ opacity: 1 }).animate({ opacity: 0.5 });

$(selector).animate({ opacity: 1}, function() 
{ 
    $(this).animate({ opacity: 0.5 }); 
});

在的情況下，我想用一個比其他什麼類型？如果我需要做更復雜的事情或切換到不同的選擇器，我會只使用後者嗎？

在此先感謝。

來源

2012-02-16 technoTarek

就像快速評估一樣，我認爲第一個效率更高，因爲您不必將$（this）作爲jQuery對象進行投射，然後對其調用動畫效果。如果你必須做更復雜的事情，你可能只想使用第二個選項。編輯：我看你沒有在尋找效率，我會認爲兩者的功能是一樣的，儘管在第一種情況下，動畫必須在第二個調用運行之前返回。 – kand 2012-02-16 15:45:04

jQuery通過對它們進行排隊來管理動畫，這樣第二個動畫在第一個動畫完成之前仍然不會被執行。這隻適用於動畫。請參閱http://api.jquery.com/queue/ – Stefan 2012-02-16 15:50:31

上的示例@Stefan有道理。你說什麼適用於這裏列出的任何東西？ [jQuery效果]（http://api.jquery.com/category/effects/） – technoTarek 2012-02-16 15:56:16

他們實際上是一樣的，所以你可能只是使用第一個。

回調（第二個版本）用於運行任何不會自動排隊的任意代碼。

這包括其他jQuery方法，例如.css()，如果不在回調中，它將在動畫完成之前很長時間運行。

// .animate() is automatically queued 
$(selector).animate({ opacity: 1 }).animate({ opacity: 0.5 });

// .css() is not automatically queued, so you'd need a callback 
$(selector).animate({ opacity: 1 }, function() { 
    $(this).css({ opacity: 0.5 }); 
});

沒有回調...

// Animation starts ----v 
$(selector).animate({ opacity: 1 }).css({ opacity: 0.5 }); 
// ...but .css() runs immediately-------------^ 
// ...because it isn't automatically added to the queue.

來源

2012-02-16 15:43:49

很好的解釋，只是看着jQuery的源代碼，你是正確的先生！ – Loktar 2012-02-16 15:50:06

唯一的區別是定時：直到第一動畫完成在第二示例中的回調將不會執行。第一個例子中的鏈接動畫會在第一個動畫開始後立即發生。

來源

2012-02-16 15:45:35 jbabey

http://jsfiddle.net/loktar/MJmgP/似乎並非如此：？ – Loktar 2012-02-16 15:47:54

@Rory我最初認爲時間也不同，但後來我在jQuery.com上閱讀了這個：每個元素都可以有一個到jQuery附加到它的函數隊列。在大多數應用程序中，只使用一個隊列（稱爲fx）。隊列允許的動作序列被稱爲異步的元素，無需停止執行程序...例如： '$（「＃富」），效果基本show（）。fadeIn（）;' 執行此語句時，元素立即開始其滑動動畫，但淡入轉換放置在fx隊列上，以便只在滑動轉換完成後才被調用。 – technoTarek 2012-02-16 15:49:54

@technoTarek這是非常有趣的，你有懶人（像我自己）的鏈接？ – jbabey 2012-02-16 15:58:09

jquery chaining vs回調

回答

相關問題