Выполнение функции обратного вызова для нескольких элементов

Question

У меня возник вопрос о том, как я мог бы выполнить обратный вызов нескольких элементов в моем div.

Так вот оно. У меня есть div, который содержит два столбца (col1 и col2, причем оба принимают 50% родительского div и на float: left) много проектов, отображаемых в виде изображений. A большой проект в два раза больше (высота), чем маленький один. Созданная конфигурация позволяет правильно отображать проекты для заполнения div и не оставлять пустые части. Итак, в основном, если у нас есть 3 проекта, мы получаем большой проект в col1 и 2 маленьких в col2. С 4 проектами мы получаем небольшой + большой в col1 и большой + маленький в col2. И так далее.

Проблема заключается в том, что когда я фильтрую различные проекты (в этом примере, например, при отображении проектов, выполненных только в JS, я использую функции show() и hide(), которые работают правильно. Если анимированные, проекты просто исчезают, потому что hide(), кажется, вызывается, пока show() еще не завершен. Затем мне рассказали о функции обратного вызова, но, похоже, он работает только на одном элементе, а не на кратных. оптимальный, так как моя фильтрация всегда отображает несколько проектов. Я хотел бы знать, как выполнить функцию должным образом, поэтому она работает на всех проектах, потому что, кажется, относится только один.

Спасибо заранее.

<script> 
function update_projects(projects_ids){ 
    console.log("Update projects : " + projects_ids); 

    var projects_top = $('.projects').offset().top; 
    if ($(window).scrollTop() > projects_top) { 
     $(window).scrollTop(projects_top); 
    } 

    var projects_config = generate_configuration(projects_ids.length); 
    var project_index = 0; 


     //$('.project').show(); 
    $('.project').slideUp(2000, function(){ 

    var odd = false; 
    for (var i = 0; i < projects_config.col1.length; ++i) { 
     var block_type = projects_config.col1[i]; 
     var project_id = projects_ids[project_index++]; 

     var odd_selector = ''; 
     if (block_type == 'small') { 
     if (odd == false) { 
      odd_selector = '.left'; 
     } else { 
      odd_selector = '.right'; 
     } 
     odd = !odd; 
     } 
     $('.col1 .project_' + project_id + '.' + block_type + odd_selector).show(); 
    } 

      odd = false; 
    for (var i = 0; i < projects_config.col2.length; ++i) { 
     var block_type = projects_config.col2[i]; 
     var project_id = projects_ids[project_index++]; 

     var odd_selector = ''; 
     if (block_type == 'small') { 
     if (odd == false) { 
      odd_selector = '.left'; 
     } else { 
      odd_selector = '.right'; 
     } 
     odd = !odd; 
     } 
     $('.col2 .project_' + project_id + '.' + block_type + odd_selector).show(); 
    } 
    }); 
    resize(); 
} 

Answer 1

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

Чтобы иметь функцию обратного вызова, которая вызывается, когда все из анимации закончили, используйте метод .promise() на коллекции:

$('.myClass').slideUp(2000).promise().then(function() { 
    // not called until all animations have finished 
    ... 
});