jquery callback после каждого() итерации

Question

$.each(mappings, function(key, item) { 
     if (match(selected_values, item)) { 
      $(key).show("slow"); 
     } else { 
      $(key).hide("slow"); 
     } 
    }); 

    //At this point, all items are still visible! 
    var item_count = $('.item').filter(':visible').length; 
    if (item_count < 12) { 
     $('.item').not(':visible').slice(0,12 - item_count).show(); 
    } 

Я выполняю итерацию по структуре данных, и в зависимости от некоторых выбранных атрибутов некоторые элементы скрыты, другие показаны.

Проблема заключается в том, что клиент запрашивает видимые минимальные элементы. Поэтому, даже если фильтрация работает правильно, и я получаю несколько 3 видимых элементов, они должны быть дополнены еще 9 элементами, поэтому показывается не менее 12.

Теперь, после каждой итерации, оказывается, что функциии .hide() еще не завершены. Как и где я могу правильно применять функции заполнения?

Я проверил Invoking a jQuery function after .each() has completed но его применяет функцию после каждого .show() или .hide(), который не то, что я хочу (это не нормально площадку во время итерации, мы в первую очередь необходимо, чтобы скрыть все, что не применяются).

Это одна: execute callback after jquery each iteration не работает, когда функция вызывается у меня такая же проблема (шоу() и скрыть() не завершена).

EDIT: Я только что узнал, что удаление «медленный» атрибут в .show() и .hide() методов решает эту проблему. Итак, что, если я хочу сохранить анимацию?

Answer 1

Это синхронно, поэтому вам не нужен обратный вызов, но у вас асинхронная анимация, и это реальная проблема. Просто используйте счетчик в цикле вместо проверки длины элементов, или добавить класс:

$.each(mappings, function(key, item) { 
    if (match(selected_values, item)) { 
     $(key).addClass('selected').show("slow"); 
    } else { 
     $(key).hide("slow"); 
    } 
}); 

if ($('.item.selected').length < 12) { 
    $('.item').not('.selected').slice(0,12 - item_count).show(); 
} 

Answer 2

Вы можете получить хорошие результаты, просто добавив .stop() в цепи:

$('.item').not(':visible').slice(0,12 - item_count).stop().show(); 

Любой ранее инициировал анимации (show/hide) будет остановлен, и элемент будет показан.