对多个元素执行回调函数

Question

我对在div中对多个元素执行回调的方式有疑问。

就是这样 我有一个div，其中包含两列（ col1和col2 ，两者都占父div的50％，并且在float：left上 ）显示为图像的许多项目。 大型项目的规模（高度）是小型项目的两倍。 创建的配置可以正确显示项目以填充div，而不会留下空白部分。 因此，基本上，如果我们有3个项目，则在col1中有一个大项目，在col2中有2个小项目。 通过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
    ...
});