2017-06-06 204 views
3

在jQuery的文檔確定鏈jQuery效果,是說,如果你想添加一個類上的選擇施加影響後,你必須使用一個回調:爲什麼,而不是使用回調

// Fade in all hidden paragraphs; then add a style class to them (not quite right) 
$("p.hidden").fadeIn(750).addClass("lookAtMe"); 

// Fade in all hidden paragraphs; then add a style class to them (correct with animation callback) 
$("p.hidden").fadeIn(750, function() { 
// this = DOM element which has just finished being animated 
$(this).addClass("lookAtMe"); 
}); 

但是,你可以鏈兩所方面的影響,而無需使用回調:

$(".something").fadeOut().fadeIn(); 

這是爲什麼?你不應該有使用回調這個樣子,太:

$(".something").fadeOut(750, function() { 
    $(this).fadeIn(); 
}); 
+0

這裏有一條重要的線索:https://learn.jquery.com/effects/queue-and-dequeue-explained/ –

+0

試着鏈接一個需要時間的效果,看看會發生什麼。基本上可以歸結爲當你想要鏈條中的下一個東西時應用。馬上,或之前的事情完成後。 – David

+0

應該指出,當沒有持續時間傳遞給jQuery動畫方法時,行爲與傳遞給方法的持續時間不同。 – guest271314

回答

1

回調意義的異步操作。所以回調是如果你想在淡化完成後發生某些事情。在你的情況下,後續鏈接.addClass()不會等待衰落完成。它馬上就會發生。

+0

只需添加更多:jQuery通過在調用中返回對象來實現鏈。這就是爲什麼你可以鎖定呼叫,這是同步行爲。 –

5

從我的理解,當你像淡入/淡出執行操作你正在做的是創建一個被放置在一個內部的動畫隊列,進行以FIFO方式行動的請求。其他人可以詳細說明這一點,但因爲它像這樣工作,所以不需要使用回調。

+0

這是真的,這個(不可否認的方法)方法已經陷入了不利的原因之一。這是一個非常嚴重的副作用,難以理解/管理。回調方法很好,但在語法方面笨重,這就是人們喜歡jQuery鏈接的原因。如果今天正在實施中,那肯定的承諾爲基礎,這將使得順序簡潔不設置特別的隊列(例如'($的await thing.fadeOut())。淡入()') –

1

因爲,簡單地說,調用.fadeIn不等待。它所做的只是將效果添加到隊列中,然後繼續使用其他任何代碼。什麼jQuery的文檔的意思是,如果你想添加一個類的元素,一旦效果完全(他們只是使用爲例),你必須使用回調,這就是所謂末的效果。

此外,你絕對可以鏈兩所方面的影響,通過使用回調,但它是打字的不必要的量(和開發商通常的目標是儘可能的懶惰)。它的工作原理鏈兩個效應在一起而不回調的原因是調用.fadeIn.fadeOut增加了jQuery的效果隊列爲DOM元素相應的效果。效果從一個隊列中依次播放,所以無論您將其添加到隊列中的速度有多快,它們都會以正確的速度和時間播放。

相關問題