jQuery while 루프가 애니메이션을 기다리지 않습니다.

Question

개체에 .clone()을 수행 한 jQuery 함수가 있고 복제 된 개체에 .insertAfter()과 .slideDown()이 있습니다. 이 전체 함수는 while 루프 안에 싸여 있습니다. 나는 짧고 가능한 한 간결이 유지하고 일반적인 예를 보여줍니다 : 끝을 나는 .slideDown() 애니메이션 전에 발사에서 다음 동안 루프를 방지 할 수있는 방법

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

(또는 그 문제에 대한 애니메이션의 다른 종류) ?

미리 감사드립니다.

Answer 1

당신은 배열에 저장, 생성 먼저 모든 요소를 ​​삽입 할 수 있습니다

. 그런 다음 재귀 함수를 사용하여 배열에서 하나의 요소를 팝하고 애니메이션을 적용하여 애니메이션의 콜백 핸들러에있는 나머지 요소에서 함수를 호출하여 다음 시작 전에 첫 번째 코드가 완료되었는지 확인할 수 있습니다. 당신이 closures을 피하려는 경우가 아니면

... 
    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

대체 솔루션은, 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)