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 shuffling）。

顺便说一下，你也可以使用同样的技术来改变页面上的元素。

＆＃13;

(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());
  });
});

＆＃13;

<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>

＆＃13;

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选择充当数组的事实

随机化每个循环

2 个答案: