javascript - 延迟循环元素

Question

目前，我正在尝试循环遍历一系列 div 并按顺序隐藏当前显示的 div，然后延迟 6 秒，然后显示该系列中的下一个。

我已经可以工作了，但我觉得它很笨重，可以做得更好，而且序列彼此不同步，这是为什么？

jQuery(document).ready(function($) {

var divs = $('div[id^="content-"]').hide(),
    i = 0;

(function cycle() { 

    divs.eq(i).show(0)
              .delay(6000)
              .hide(0, cycle);

    i = ++i % divs.length;

})();

});


jQuery(document).ready(function($) {

var divs = $('a[id^="title-"]').hide(),
    i = 0;

(function cycle() { 

    divs.eq(i).show(0)
              .delay(6000)
              .hide(0, cycle);

    i = ++i % divs.length;

})();

});

这可以更好并且保持同步吗？或者这是我必须忍受的事情？

非常感谢任何帮助!

Answer 1

编辑、更新

$(function() {
      // set `jQuery.fx.interval` to `0`
      $.fx.interval = 0;
      // elements `content` , `title`
      var content = $("div[id^=content-]")
      , title = $("div[id^=title-]")
      // delay between `.show()` and `.hide()`
      , delay = 6000;
      // hide elements
      content.add(title).hide(0);
      // call `cycler` with `element` , `delay` arguments
      var cycler = function(el, t) {
        // return named iife `cycle` with `element` , `i` index arguments 
        return (function cycle(elem, i) {
          // show `elem` at `i` index
          // return `elem`
          return elem.eq(i).show({duration:0, easing:"linear"})
            // `delay` `t`
            .delay(t)
            // hide `elem` at `i` index
            .hide({duration:0, easing:"linear", complete:function() {
              // increment `i` 
              i = ++i % elem.length;
              // call `cycle` recursively
              cycle(elem, i);
            }});
        }(el, 0));
      };
      // call `cycler` utilizing `$.when()` for ability to process
      // returned `content` , `title` items at `.done()` , `.then()` callbacks
      $.when(cycler(content, delay + 1), cycler(title, delay))
    });

$(function() {
      $.fx.interval = 0;
      var content = $("div[id^=content-]"),
        title = $("div[id^=title-]"),
        delay = 6000;
      content.add(title).hide(0)
      var cycler = function(el, t) {
        return (function cycle(elem, i) {
          return elem.eq(i).show({duration:0, easing:"linear"})
            .delay(t)
            .hide({duration:0, easing:"linear", complete:function() {
              i = ++i % elem.length;
              cycle(elem, i);
            }});
        }(el, 0));
      };
      $.when(cycler(content, delay + 1), cycler(title, delay))
    });

div {
    width : 50px;
    height : 50px;
}
div:nth-of-type(1), div:nth-of-type(7) {
    background : blue;
}
div:nth-of-type(2), div:nth-of-type(8) {
    background : red;
}
div:nth-of-type(3), div:nth-of-type(9) {
    background : green;
}
div:nth-of-type(4), div:nth-of-type(10) {
    background : orange;
}
div:nth-of-type(5), div:nth-of-type(11) {
    background : pink;
}
div:nth-of-type(6), div:nth-of-type(12) {
    background : purple;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="content-1"></div>
<div id="content-2"></div>
<div id="content-3"></div>
<div id="content-4"></div>
<div id="content-5"></div>
<div id="content-6"></div>
<br />
<div id="title-1"></div>
<div id="title-2"></div>
<div id="title-3"></div>
<div id="title-4"></div>
<div id="title-5"></div>
<div id="title-6"></div>