jQuery while循環不等待動畫

Question

我有一個jQuery函數，它在對象上執行.clone()，然後在克隆對象上執行.insertAfter()和.slideDown()。這整個功能被包裹在while循環中。我會保持這個短而簡潔越好，顯示了通用例如：

while (statement) { 
    // code for clone and insert ... 
    $("#newly_created_object").slideDown(500); 
} 

如何防止下一個while循環從.slideDown()動畫之前發射（或任何其他形式的動畫爲此事）結束？

預先感謝您！

Answer 1

您可能需要首先創建並插入所有元素，將它們存儲在陣列中。然後，您可以使用遞歸函數從數組中彈出一個元素並對其進行動畫處理，在動畫的回調處理程序的其餘元素上調用您的函數 - 以確保第一個元素在下一次啓動之前完成。

... 
    var elems = []; 
    while (statement) { 
     var elem = ...clone and insert element, returning element... 
     elems.push(elem); 
    } 

    animateElems(elems); 
} 


function animateElems(elems) 
{ 
    if (elems.length > 0) { 
     var elem = elems.shift(); 
     $(elem).slideDown(500, function() { 
      animateElems(elems); 
     } 
    } 
} 

Answer 2

你必須使動畫同步，但這不是一個好主意，因爲它會阻止瀏覽器並惹惱用戶。這是關於該主題的另一個問題：JQuery synchronous animation

一個更好的主意是使用回調函數，該函數將在動畫完成時執行。像這樣：

function cloneAndInsert(elm){ 
    if(statement){ 
    // code for clone and insert 
    $("#newly_created_object").slideDown(500, function(){ 
     cloneAndInsert(elm); 
    }); 
    } 
} 

這段代碼會在一個對象（遞歸）完成時調用它自己。

Answer 3

您可以檢查元素仍然被動畫這樣的：

while (statement) { 
    if ($("#newly_created_object").is(":animated")) continue; 
    $("#newly_created_object").slideDown(500); 
} 

雖然它可能不是最好的解決辦法，因爲你能不能讓用戶的瀏覽器忙碌。

正確的方法動畫結束後做的動作：

$("#newly_created_object").slideDown(500, function() { 
    alert('this alert box appears when animation is finished'); 
}); 

Answer 4

另一種解決方案，除非你想避免closures，是使用jQuery的queue()和dequeue()功能：

while (statement) { 
    var elem = ... clone and insert element, returning element ... 

    $(document).queue((function (el) { 
    return function() { 
     el.slideDown(function() { $(document).dequeue(); }); 
    }; 
    })(elem)); 
} 

工作演示：http://jsbin.com/axafo（編輯通過：http://jsbin.com/axafo/edit#javascript）