每个功能检查是否通过所有项目迭代，然后重新开始

Question

$('li.cont').each(function(i) {
    $(this).delay((i + 1) * 3000).fadeOut(1500);

我想添加能够检查我所有的li.cont是否已迭代的能力，然后再重新开始。与当前功能相反，最终项目逐渐消失，然后该区域只是空白。

Answer 1

我建议使用fadeOut的回调参数，该回调是在一个动画完成时被调用的。在那里，您将以圆形旋转方式开始下一个。一旦再次获得第一个，您就可以恢复情况并显示所有元素。

var $items = $('li.cont');
(function loop(i) {
    if (!i) $items.show(); // starting from scratch: show all
    $items.eq(i).fadeToggle(1500, loop.bind(null, (i+1)%$items.length));
})(0);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li class="cont">A</li>
<li class="cont">B</li>
<li class="cont">C</li>
</ul>

我实际上使用了fadeToggle，这归结为同一件事，除了它可以使我演示另一个变体。在所有元素都被隐藏后，这是不是重置的情况，因此切换将开始淡入每个项目而不是输出。然后，完成此操作后，褪色方向再次逆转：

var $items = $('li.cont');
(function loop(i) {
    $items.eq(i).fadeToggle(1500, loop.bind(null, (i+1)%$items.length));
})(0);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li class="cont">A</li>
<li class="cont">B</li>
<li class="cont">C</li>
</ul>

Answer 2

您是否尝试过制作对象的副本并将其添加到辅助数组然后返回？在制作幻灯片显示时，我会用角度执行此操作。我从阵列的末端开始，然后以0。

工作。

var a = [];
var b = [];
function changeIn(){
     var l = a.length
     if(a.length === 0)
     {
          angular.copy(b, a);
     }
     // do stuff here
     var x = []
     angular.copy(a[l], x);
     b.push(x);
     if (l > -1) {
         array.splice(l, 1);
     }
};

另外，您可以使用array.pop（）或array.shift（）获取最后一个项目或第一个项目的值并将其从列表中删除。我在此示例中显示的代码绝对是执行此操作的最长方法。在堆栈上发现了许多示例可以更有效地进行此操作，这取决于您想如何编写代码。

这里有一个很好的样本：

javaScript：将对象从一个数组移动到另一个数组：最佳方法？