.each ()가 완료된 후 jQuery 함수 호출

jQuery에서는 (또는 다른 유형의 반복 콜백) 호출이 완료된 후 콜백 을 호출 하거나 이벤트를 트리거 할 수 있습니다..each()

예를 들어이 "페이드 앤 제거"를 완료하려면

$(parentSelect).nextAll().fadeOut(200, function() {
    $(this).remove();
});

일부 계산을 수행 하고 . 뒤에 새 요소를 삽입하기 전에 $(parentSelect)기존 요소가 여전히 jQuery에 표시되고 임의의 시간 (각 요소 당 200 개)이 잠자기 / 지각되어 있으면 취성 솔루션처럼 보이는 경우 계산이 올바르지 않습니다.

.bind()이벤트 콜백에 필요한 논리를 쉽게 얻을 수 있지만 .trigger()위의 반복이 완료된 후 깨끗하게 호출하는 방법을 모르겠습니다 . 분명히 반복 내에서 트리거가 여러 번 발생하므로 트리거를 호출 할 수 없습니다.

의 경우 $.each(), 나는 데이터 인수의 끝에 무언가를 추가하는 것을 고려했습니다 (반복 본문에서 수동으로 찾을 것입니다). 반복 콜백과 관련하여 흐름을 제어하는 ​​방법.

@tv의 답변에 대한 대안 :

var elems = $(parentSelect).nextAll(), count = elems.length;

elems.each( function(i) {
  $(this).fadeOut(200, function() { 
    $(this).remove(); 
    if (!--count) doMyThing();
  });
});

참고 있다는 .each()그 자체는 동기 - 전화를 다음 명령문이 할 수 .each()있는 유일한 후 실행됩니다 .each()호출이 완료됩니다. 그러나 반복 에서 시작된 비동기 작업 .each()은 물론 자체 방식으로 계속 진행됩니다. 요소의 페이드 호출은 타이머 중심의 애니메이션이며, 자체 속도로 계속 진행됩니다.

따라서 위의 솔루션은 얼마나 많은 요소가 페이딩되는지 추적합니다. 각 호출 .fadeOut()은 완료 콜백 을 받습니다. 콜백이 관련된 모든 원래 요소를 통해 계산 된 것을 알면 모든 페이딩이 완료되었다는 확신을 가지고 후속 조치를 취할 수 있습니다.

이것은 4 살짜리 답변입니다 (2014 년 현재). 이 작업을 수행하는 현대적인 방법은 아마도 지연 / 약속 메커니즘을 사용하는 것과 관련이있을 것입니다. 비록 위의 내용은 간단하고 잘 작동합니다.

아마 늦었지만이 코드가 작동한다고 생각합니다 ...

$blocks.each(function(i, elm) {
 $(elm).fadeOut(200, function() {
  $(elm).remove();
 });
}).promise().done( function(){ alert("All was done"); } );

좋아, 이것은 사실 이후 약간이지만, .promise () 또한 당신이 추구하는 것을 달성해야합니다.

약속 문서

내가 작업중 인 프로젝트의 예 :

$( '.panel' )
    .fadeOut( 'slow')
    .promise()
    .done( function() {
        $( '#' + target_panel ).fadeIn( 'slow', function() {});
    });

:)

JavaScript는 동기식으로 실행되므로 사용자가 배치 한 후에 는 완료 each()될 때까지 실행되지 않습니다 each().

다음 테스트를 고려하십시오.

var count = 0;
var array = [];

// populate an array with 1,000,000 entries
for(var i = 0; i < 1000000; i++) {
    array.push(i);
}

// use each to iterate over the array, incrementing count each time
$.each(array, function() {
    count++
});

// the alert won't get called until the 'each' is done
//      as evidenced by the value of count
alert(count);

경고가 호출 될 때까지 경고가 실행되지 않기 때문에 카운트는 1000000과 같습니다 each().

배열을 다루지 만 json 객체는 다루지 않는 많은 응답을 발견했습니다. 내 솔루션은 단순히 카운터를 증가시키는 동안 객체를 한 번 반복 한 다음 객체를 반복하여 코드를 수행 할 때 두 번째 카운터를 증가시킬 수 있습니다. 그런 다음 두 카운터를 함께 비교하여 솔루션을 얻으십시오. 나는 그것이 약간 어수선하다는 것을 알고 있지만 지금까지보다 우아한 해결책을 찾지 못했습니다. 이것은 내 예제 코드입니다.

var flag1 = flag2 = 0;

$.each( object, function ( i, v ) { flag1++; });

$.each( object, function ( ky, val ) {

     /*
        Your code here
     */
     flag2++;
});

if(flag1 === flag2) {
   your function to call at the end of the iteration
}

내가 말했듯이, 그것은 가장 우아하지는 않지만 작동하고 잘 작동하며 아직 더 좋은 해결책을 찾지 못했습니다.

건배, JP

당신이 그것을 두 단계로 만들려고한다면, 이것은 효과가있을 수 있습니다. 그래도 순서대로 애니메이션에 의존합니다. 나는 그것이 문제가 될 것이라고 생각하지 않습니다.

var elems = $(parentSelect).nextAll();
var lastID = elems.length - 1;

elems.each( function(i) {
    $(this).fadeOut(200, function() { 
        $(this).remove(); 
        if (i == lastID) {
           doMyThing();
        }
    });
});

이건 어떤가요

$(parentSelect).nextAll().fadeOut(200, function() { 
    $(this).remove(); 
}).one(function(){
    myfunction();
}); 

나머지 요청은 대기열에 넣어야 작동합니다.

var elems = $(parentSelect).nextAll();
var lastID = elems.length - 1;

elems.each( function(i) {
    $(this).fadeOut(200, function() { 
        $(this).remove(); 
        if (i == lastID) {
            $j(this).queue("fx",function(){ doMyThing;});
        }
    });
});

나는 같은 문제를 겪고 다음 코드와 같은 솔루션으로 해결했습니다.

var drfs = new Array();
var external = $.Deferred();
drfs.push(external.promise());

$('itemSelector').each( function() {
    //initialize the context for each cycle
    var t = this; // optional
    var internal = $.Deferred();

    // after the previous deferred operation has been resolved
    drfs.pop().then( function() {

        // do stuff of the cycle, optionally using t as this
        var result; //boolean set by the stuff

        if ( result ) {
            internal.resolve();
        } else {
            internal.reject();
        }
    }
    drfs.push(internal.promise());
});

external.resolve("done");

$.when(drfs).then( function() {
    // after all each are resolved

});

이 솔루션은 다음과 같은 문제를 해결합니다. Deferred 객체를 사용하여 .each () 반복에서 시작된 비동기 작업을 동기화합니다.

아마도 늦게 응답했지만이 https://github.com/ACFBentveld/Await 를 처리하는 패키지가 있습니다.

 var myObject = { // or your array
        1 : 'My first item',
        2 : 'My second item',
        3 : 'My third item'
    }

    Await.each(myObject, function(key, value){
         //your logic here
    });

    Await.done(function(){
        console.log('The loop is completely done');
    });

나는 이와 같은 것을 사용하고있다 :

$.when(
           $.each(yourArray, function (key, value) {
                // Do Something in loop here
            })
          ).then(function () {
               // After loop ends.
          });