for 루프 지연 기능이 있습니다

Question

항목 이름과 함께 콘솔 메시지를 표시하는 간단한 기능이 있습니다. 간단한 것 :

for(var i =0; i< array.length; i++) 
child(array[i]); 

var child = function(itemname){ 
console.log(itemname); 
} 

여기서 배열의 길이는 동적이며 포함 된 값도 마찬가지입니다. 이제 하위 함수 내부에 애니메이션을 추가하고 for 루프가 다시 호출하기 전에 확실히 끝내기를 원합니다.

나는 jQuery Deferred를 사용하는 방법을 알고 있고 다른 것을 끝낸 후에 하나의 함수를 호출 할 수 있지만 여기서는 for 루프 내에서 호출하는 방법을 모른다. 그게 여기에서 사용할 올바른 선택인지 확신 할 수 없습니다. 그럼, 내가 원하는 것은 내가 모든 증가와 함께, 자식 기능까지 .... 자식 함수가 완료 될 때까지 기다린 후 자식 함수가 다시 호출해야이라고하며 루프됩니다, 그래서

for(var i =0; i< array.length; i++) //for example 3 times 
{ 

child(i) //call child and pass the the value of i 
wait till child function completes 

} 

입니다 조건이 충족됩니다.

$ .when.apply 기능으로 몇 가지 솔루션을 찾았지만 사용법을 알 수 없습니다. 모든 문서, 샘플, 참조, '읽기'문서가 도움이 될 것입니다!

편집 : 애니메이션 예를 사용해서는 안됩니다. 내 잘못이야. 자식 함수가 ajax 호출을한다고 가정합니다. 자, 이제 자식 함수 번을 번 호출하고 반복 할 때마다 ajax 호출을 완료하기 위해 루프가 대기하도록하고 싶습니다. 그것은 한 번 이상 호출하고 싶은 함수와 같습니다. 연결이 없습니다.

Answer 1

여기서는 루프 할 필요가 없습니다. 연결된 애니메이션의 경우 실제로는 적절한 도구가 아닙니다. 대신 jQuery.Deferred 객체를 사용할 수 있습니다. 다음은 어떻게 사용할 수 있는지 보여주는 예입니다. 애니메이션 기능을 child 반환 객체로 설정하는 것이 무엇을해야하는지 알 수 있습니다. 그런 다음 then 메서드를 사용하여 array에 요소가 포함될 때까지 child에 한 번 더 전화해야하는지 결정할 수 있습니다.

var array = ['message one', 'and another', 'finally one more']; 
 

 
// Invoke child until array has elements, no loops are needed here 
 
child(array.shift()).then(function next() { 
 
    if (array.length) { 
 
     child(array.shift()).then(next); 
 
    } 
 
}); 
 

 

 
// An example of child function. 
 
// Important part here is that this function returns deferred promise 
 
// which is resolved once animation is complete. 
 
function child(i) { 
 
    var $message = $('<div class="message">' + i + '</div>'); 
 
    $message.appendTo('body'); 
 
    return $.Deferred(function() { 
 
     $message.delay(1000).fadeOut(1000, this.resolve); 
 
    }); 
 
}

.message { 
 
    padding: 20px; 
 
    background: #55E755; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

UPD. 하위 함수에서 AJAX 호출을 사용하면 훨씬 간단합니다. 당신은 단지 $.get(...) 같은 것을 반환합니다, 그것은 이미 약속입니다. $ .Deferred로 새로운 것을 만들 필요가 없습니다.

Answer 2

재귀 적으로하는 것은 어떻습니까?

function child(i){ 
    if(i<array.length){ 
     console.log(array[i]); 
     child(i+1); 
    } 
} 

var array = ['1','2','3']; 

child(0);