jquery - 在 Jquery 中使用 .each 进行延迟循环

Question

我不擅长 jQuery，所以我不确定我的假设是否正确。

我正在使用同位素插件，我想用它一点一点地插入元素(而不是一次插入所有元素)，这样它看起来也像这样(对于人眼来说)

插入带有同位素的项目，我使用

$('#container').isotope( 'insert', $item);

所以为了逐一插入，我正在做

$("#items_are_here").find('.item').each(function( index ) {
     setTimeout(function() {
            $('#container').isotope( 'insert', $(this));
         },3000);
    });

然而，这似乎浏览器等待某些东西，然后立即显示它们

如果我这样做

  setTimeout(function() {
   $("#items_are_here").find('.item').each(function( index ) {
          $('#container').isotope( 'insert', $(this));

        }); },3000);

一切正常，但不是一一对应的..

这是正确的方法吗？还是我把它弄得太复杂了？

这里是fiddle 。其中有 2 个按钮 - 全部插入 - 查找所有 .item 并插入它们。并一一插入，这会延迟执行建议的方式。正如您所看到的，没有延迟。

Answer 1

因为 .each() 对于每个条目都非常即时地运行，因此您最终会遇到一堆或多或少相同的超时。因此，大约 3 秒后，所有超时都会到期，并且会添加项目。

为了防止这种情况，您将根据项目的索引设置超时。因此第 0 项将在 3 秒后插入，第 1 项将在 6 秒后插入，依此类推。

$("#items_are_here").find('.item').each(function( index ) {
  var item = $(this);
  setTimeout(function() {
    $('#container').isotope('insert', item);
  },3000 * (index + 1));
});