随机化每个循环

Question

我正在尝试随机化我制作的这个函数，但我只找到了一个随机 TimeOut 解决方案。我希望顺序是随机的，而不是超时。

$(document).ready(function() {
    function boucle() {
        $('#test img').fadeTo(1000, 0);
        $('#test img').delay(1000).each(function(i) {
            $(this).delay((i++) * 1500).fadeTo(1500, 1);
        });
    }
    boucle();
    setInterval(boucle, 15000);
});

我试过this solution 但这不是我想要的。而this one 对我不起作用。

有人可以帮我做那个随机循环吗？提前谢谢你。

编辑：

这是我如何实现@jack 提供的解决方案：

(function($) {
          $.fn.shuffle = function() {
            // credits: http://bost.ocks.org/mike/shuffle/
            var m = this.length, t, i;

            while (m) {
              i = Math.floor(Math.random() * m--);

              t = this[m];
              this[m] = this[i];
              this[i] = t;
            }

            return this;
          };
        }(jQuery));

        function boucle() {
            $('#test img').fadeTo(1000, 0);
            $('#test img').shuffle().delay(1000).each(function(i) {
                $(this).delay((i++) * 1500).fadeTo(1500, 1);
            });
        }
        boucle();
        setInterval(boucle, 10000);

Answer 1

这是一个示例，说明如何在使用 .each() 对其进行迭代之前对 jQuery 的结果数组进行洗牌（使用 Fisher-Yates-Knuth 洗牌）。

顺便说一句，您也可以使用相同的技术来打乱页面上的元素。

(function($) {
  $.fn.shuffle = function() {
    // credits: http://bost.ocks.org/mike/shuffle/
    var m = this.length, t, i;

    while (m) {
      i = Math.floor(Math.random() * m--);

      t = this[m];
      this[m] = this[i];
      this[i] = t;
    }

    return this;
  };
}(jQuery));

jQuery(function($) {
  $('div').shuffle().each(function() {
    console.log($(this).text());
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>

Answer 2

如果你可以使用query-js，你可以像这样随机排序：

$(document).ready(function() {
    function boucle() {
        var i = 0;
        new Query($('#test img').fadeTo(1000, 0).delay(1000))
        .orderBy(function() {
            return Math.random();
        }).iterate(function(t) {
            $(t).delay((i++) * 1500).fadeTo(1500, 1);
        });
    }
    boucle();
    setInterval(boucle, 15000);
});

这是利用 jquery 选择充当数组的事实