在jQuery中使用.each进行延迟循环 [英] Looping with .each with delay in Jquery

问题描述

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

I am not good at jQuery so I am not sure if my assumptions are corrent.

我正在使用isotope插件，我想用它一点一点地逐个插入元素(而不是一次全部插入元素)，这样看起来(对人眼来说)

I am using the isotope plugin, with which I want to insert elements one by one (and not everything at once) with a slight delay so it will also look like it (for the human eye)

要插入具有同位素的项目，我将使用

to insert an item with isotope I use

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

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

so in order to insert one-by-one I am doing

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

但是，这似乎是浏览器在等待一些东西，然后一次全部显示

This however seems that the browser waits for something, and then displays them all at once

如果我愿意

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

        }); },3000);

一切正常，但不能一一对应.

everything works, but not one-by-one..

这是正确的方法吗?还是我太复杂了?

Is this the right way to do this? or am I over-complicating it?

这是小提琴.其中有2个buttosn-全部插入-查找所有.item并将它们插入.并一拖一地插入延迟提出的建议方法.如您所见，没有延迟.

here is fiddle. In it, there are 2 buttosn - insert all - which finds all .item and inserts them. And insert one-by-one which does the proposed way with delay. As you can see, there is no delay.

推荐答案

    var $items=$("#items_are_here").find('.item');
    var i=-1;
    var delayed=setinterval(function() {
            if (++i<$items.length) $('#container').isotope( 'insert', $items.eq(i));
            else clearInterval(delayed); 
             },3000);

未经测试. 或

    var $container=$('#container');     
    $.fn.extend({
      onebyone :function ($ctnr,i) {
           if (!i) i = 0;
           var $o=$(this);
           setTimeOut(function() {
                 $ctnr.isotope( 'insert', $o.eq(i)); 
                 if (++i<$o.length) $o.onebyone(i); 
               },3000);
           return this; 
      }
    $("#items_are_here").find('.item').onebyone($container);

这篇关于在jQuery中使用.each进行延迟循环的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！