每個功能檢查，如果通過所有項目迭代然後重新來過

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（）來獲得無論是過去還是第一個項目的價值和將它從列表中刪除。我在這個例子中展示的代碼絕對是這樣做的最長的方式。 Stack上有許多例子可以更高效地實現這一點，具體取決於您想如何編寫代碼。

這裏有發現了一個不錯的樣本：

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