Question

我试图在setInterval中一个接一个地显示元素列表5秒，但在第7个元素之后，我想等待60秒，这意味着超时并继续间隔。

以下是我的代码，我可以完成它，但是这个代码的问题是它在每个第7个元素上重复执行超时，但是，我只想在第7次发生时进行，而不是全部第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

其次，您在timeout代码中每5秒创建一个新的firstInterval。只有在显示前7个元素后才会发生这种情况。通过在if (index === 7) {语句中移动它来解决这个问题，这样一旦显示了7个元素就会执行它。

我已应用的另一项优化是将$("#love p:hidden:first")更改为$("#love p").filter(":hidden").filter(":first")。根据{{3}}：

由于:first是jQuery扩展而不是CSS规范的一部分，因此使用:first的查询无法利用本机DOM querySelectorAll()方法提供的性能提升。要在使用:first选择元素时获得最佳性能，请先使用纯CSS选择器选择元素，然后使用.filter(":first")。

更改:hidden也是出于同样的原因。 http://api.jquery.com/first-selector/

现在一切都可以达到前七个元素（假设你至少有7个元素，否则你需要检查else中firstIndex内元素是否存在）。接下来，我们删除clearTimeout(timeout);作为超时只运行一次，不需要清除。

我们接下来要做的是，因为我们不知道在前7个之后要显示多少元素，我们尝试找到一个隐藏元素（带var elem = $("#love p").filter(":hidden");）并检查它是否存在（使用{ {1}}）。如果它存在，我们得到第一个，然后淡入（if (elem)），否则，我们停止循环（elem.filter(":first").fadeIn(2000);）。

Jquery：再次执行间隔，超时，然后间隔

1 个答案: