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

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

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

예를 들어, 이 "페이드 앤 리무브"를 완료하고 싶습니다.

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

몇 가지 계산을 수행하고 새로운 요소를 삽입하기 전에$(parentSelect)기존 요소가 여전히 jQuery에 표시되고 임의의 시간(각각의 요소에 대해 200)을 수면/지연하는 것이 기껏해야 취약한 해결책인 것 같으면 계산이 틀립니다.

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

의 경우에는$.each()데이터 인수 끝에 (반복 본문에서 수동으로 찾는) 무언가를 추가하는 것을 고려했지만, 강제로 추가하는 것은 싫습니다. 그래서 저는 반복 콜백과 관련하여 흐름을 제어하는 다른 우아한 방법이 있기를 바랍니다.

너무 늦었을 수도 있지만 이 코드가 작동하는 것 같아요...

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

@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년 현 시점).이를 위한 현대적인 방법은 아마도 연기/약속 메커니즘을 사용하는 것과 관련이 있을 것입니다. 위의 방법은 간단하고 잘 작동할 것입니다.

좋아요, 이것은 사실로부터 조금 지난 후일 수도 있지만, .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);

되면 count는 .each()완료되었습니다.

다음과 같은 것을 사용하고 있습니다.

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

저는 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

});

이 솔루션은 지연된 개체를 사용하여 .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');
    });

var count = $(parentSelect).length;

$(parentSelect).each(function () {

   //do you task here

   if (!--count) {

     //do the cleanup task

     alert ('Reached the end of each loop')
   }

});

언급URL : https://stackoverflow.com/questions/2358205/invoking-a-jquery-function-after-each-has-completed