jquery：做一個間隔，timout，然後再次間隔

Question

我試圖做一個在setInterval 5秒但在第七個元素後，我想等待60秒，意味着超時並繼續間隔。

以下是我的代碼，我可以完成但這個代碼的問題是，它每7個元素重複執行一次超時，但是，我只是想在1日發生第7次，而不是所有的第七個元素。

$(document).ready(function(){ 
     var index=0; 
     var firstInterval=setInterval(function(){ 
      if(index==7){ 
       $("#love p:hidden:first").fadeIn(2000); 
       clearInterval(firstInterval); 
       index=0; 
       return; 
      }else{ 
       $("#love p:hidden:first").fadeIn(2000); 
       index++; 
      } 
      var timeout=setTimeout(function(){ 
       $("#love p:hidden:first").fadeIn(2000); 
       var secondInterval=setInterval(function(){ 
        $("#love p.2nd_batch:hidden:first").fadeIn(2000); 
       },5000); 
       clearTimeout(timeout); 
      },60000); 
     },5000); 
    }); 

任何幫助將不勝感激。謝謝

Answer 1

這是否適合您？ http://jsfiddle.net/301hsmom/3/（看右下）

$(document).ready(function() { 
    var index = 1; 
    var firstInterval = setInterval(function() { 
    if (index === 7) { 
     $("#love p").filter(":hidden").filter(":first").fadeIn(2000); 
     clearInterval(firstInterval); 
     index = 1; 
     var timeout = setTimeout(function() { 
     $("#love p:hidden:first").fadeIn(2000); 
     var secondInterval = setInterval(function() { 
      var elem = $("#love p").filter(":hidden"); 
      if (elem) { 
      elem.filter(":first").fadeIn(2000); 
      } else { 
      clearInterval(secondInterval); 
      } 
     }, 5000); 
     }, 60000); 
    } else { 
     $("#love p").filter(":hidden").filter(":first").fadeIn(2000); 
     index++; 
    } 
    }, 5000); 
}); 

首先，你var index = 0;和循環，直到index === 7將運行8倍，而不是預期的7。爲了解決這個問題，改變其中的一個var index = 1;或index === 6。

其次，您在firstInterval代碼中每5秒創建一個新的timeout。只有在顯示前7個元素後纔會發生這種情況。通過將其移動到if (index === 7) {語句中來解決該問題，以便在顯示7個元素後執行該操作。

我應用的另一個優化是將$("#love p:hidden:first")更改爲$("#love p").filter(":hidden").filter(":first")。據http://api.jquery.com/first-selector/：

因爲:first是一個jQuery擴展和不CSS規範的一部分，使用:first不能利用由本地DOM querySelectorAll()方法提供的性能提升的查詢。要在使用:first選擇元素時實現最佳性能，請先使用純CSS選擇器選擇元素，然後使用.filter(":first")。

更改:hidden是出於同樣的原因。 http://api.jquery.com/hidden-selector/。

現在一切都可以運行到前七個元素（假設您至少有7個元素，否則您需要檢查firstIndex內的else中是否存在該元素）。接下來，我們刪除clearTimeout(timeout);，因爲超時只能運行一次，不需要清除。我們接下來要做的事情是，因爲我們不知道在第7個元素之後要顯示多少元素，我們試圖找到隱藏元素（使用var elem = $("#love p").filter(":hidden");）並檢查它是否存在（使用if (elem)）。如果存在，我們得到第一個，然後淡入（elem.filter(":first").fadeIn(2000);），否則，我們停止循環（clearInterval(secondInterval);）。