Викликати функцію jQuery після завершення .each ()

В 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()отримує зворотний виклик завершення. Коли зворотний виклик помітить, що він зараховується через усі задіяні оригінальні елементи, можна зробити певні дії з упевненістю, що все зникнення закінчилося.

Це відповідь чотирьох років (на даний момент у 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

});

Рішення вирішує таку проблему: синхронізувати асинхронні операції, розпочаті в ітерації .each (), використовуючи об'єкт Deferred.

Можливо, пізня відповідь, але є пакет для вирішення цього 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.
          });