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个元素。

现在，在每次迭代之后，似乎.show()和.hide()函数尚未终止。我如何以及在哪里正确应用填充函数？

我已经检查过了 Invoking a jQuery function after .each() has completed但是他在每个.show()或.hide()之后应用了该函数，这不是我想要的（在迭代期间填充不正常，我们首先需要隐藏所有不适用的函数））。

这一个： execute callback after jquery each iteration 不起作用，调用函数时我有同样的问题（show（）和hide（）没有完成）。

修改：我刚刚发现删除.show()和.hide()方法中的“slow”属性可以解决问题。现在，如果我想保留动画怎么办？

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();

任何先前启动的动画（显示/隐藏）都将暂停，只会显示该项目。

每次迭代后的jquery回调

2 个答案: