每个函数检查是否遍历所有项目然后重新开始答案

【问题标题】：each function check if iterated through all items then start over每个函数检查是否遍历所有项目然后重新开始
【发布时间】：2016-12-07 18:01:41
【问题描述】：

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

我想添加检查我的所有li.cont 是否都已迭代的功能，如果是，则重新开始。与最终项目淡出然后该区域只是空白的当前功能相反。

【问题讨论】：

为什么不围绕每个循环放一个？
现在 jquery 3.1 也有问题？
我认为你在寻找无限循环，对吧？
“重新开始”是什么意思，如果您再也看不到任何东西，再次淡出时将不起作用？
您到底想达到什么目的？像无限淡入/淡出效果？如果是这样，带有步骤的 CSS 过渡将是更好的方法

标签： javascript jquery

【解决方案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>

【讨论】：

【解决方案2】：

您是否尝试过制作对象的副本并将其添加到辅助数组然后返回？我在制作幻灯片时使用 angular 来执行此操作。我从数组的末尾开始，一直到 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() 来获取最后一项或第一项的值，并将其从列表中删除。我在此示例中显示的代码绝对是执行此操作的最长方法。根据您希望如何编写代码，可以在 Stack 上找到许多更有效地执行此操作的示例。

这里有一个很好的示例：

Javascript: move objects from one array to another: Best approach?

【讨论】：

这与问题有什么关系？