Как я могу случайно показать набор элементов, используя jQuery?

Question

Используя jQuery, как бы вы show() каждые div.foo на странице в случайном порядке, с новым, появляющимся каждые X миллисекунд?

Разъяснение : Я хочу начать со всех этих скрытых элементов и закончить их показом, поэтому не имеет смысла show() один и тот же элемент дважды.

Первоначально я думал, что я сделаю массив, в котором перечислены все элементы, выберу случайным образом один, покажу тот, удалю его из массива, используя splice(), а затем случайным образом выберу следующий из оставшегося списка - и т. Д. Но поскольку мой массив является частью объекта jQuery, splice() недоступен.

Answer 1

Интересный способ сделать это - расширить базовый объект Javascript Array функцией shuffle. В Prototype (должен быть таким же в JQuery, кроме jQuery.extend). Это быстрое и грязное перемешивание, есть много других способов сделать это.

Object.extend(Array.prototype, {
  shuffle : function() {
    this.sort( function() { return 0.5 - Math.random(); } );
    return this;
  }
});

Итак, предположим, что у вас есть готовый массив div, вызовите метод shuffle () и просто пролистайте их по порядку (они теперь перемешаны) и покажите их (согласно вашим интервалам). Возможно, вы захотите сделать это «неразрушающим», хотя путем клонирования массива, возвращенного методом shuffle, вместо прямой сортировки.

Answer 2

Я не использую jQuery сам, но как насчет этого:

var intervalMilliseconds = X; // set to your value for X
var divFoos = $("div.foo").get();
var intervalId = setInterval(function() {
   $(divFoos.splice(Math.floor(Math.random() * divFoos.length), 1)).show();
   if(divFoos.length == 0) clearInterval(intervalId);
}, intervalMilliseconds);

Это должно сработать.

---

ОБНОВЛЕНИЕ: Поскольку в вашем описании нет точных сведений, я предположил, что вы имели в виду, что в конечном итоге вы хотите показать все из них, и как только они будут видны, мы закончили. Если нет, пожалуйста, объясните, чтобы я мог обновить это (если вы уже не можете определить, что вам нужно, из предоставленного мною кода).

Answer 3

Вот как бы я это сделал (не проверено) :

(function () {
    var int, els;
    int = 100; // interval, in milliseconds
    els = $('div.foo');
    setInterval(function () {
        var idx;
        idx = Math.floor(els.length * Math.random());
        $(els[idx]).show();
        setTimeout(function () {
            $(els[idx]).hide();
        }, int);
    }, int);
})();