Wie kann ich zufällig eine Reihe von Elementen mit jQuery zeigen?

Question

Wie würden Sie mit jQuery show() jede div.foo auf einer Seite in einer zufälligen Reihenfolge, wobei alle X Millisekunden ein neuer erscheint?

Klärung : Ich möchte damit beginnen, dass alle diese Elemente ausgeblendet sind, und damit enden, dass sie alle angezeigt werden. show() das gleiche Element zweimal.

Ursprünglich dachte ich, ich würde ein Array erstellen, das alle Elemente auflistet, zufällig eines auswählen, dieses anzeigen, es aus dem Array entfernen, indem ich splice() und wählt dann zufällig den nächsten aus der verbleibenden Liste aus - usw. Aber da mein Array Teil eines jQuery-Objekts ist, splice() ist nicht verfügbar.

Answer 1

Ein interessanter Weg, dies zu tun, wäre die Erweiterung des Array-Basisobjekts von Javascript um eine Shuffle-Funktion. In Prototype (sollte das gleiche in JQuery sein, außer jQuery.extend). Dies ist schnell und schmutzig shuffle, es gibt viele andere Möglichkeiten, es zu tun.

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

Angenommen, Sie haben Ihr Array von divs bereit zu gehen, rufen Sie die shuffle()-Methode und gehen Sie einfach durch sie eine nach der anderen, in der Reihenfolge (sie sind jetzt gemischt) und zeigen sie (nach Ihren Intervallen). Könnte wollen, dass "nicht-destruktiv" aber durch Klonen des Arrays zurückgegeben von der shuffle-Methode statt Sortieren es direkt.

Answer 2

Ich selbst benutze jQuery nicht, aber wie wäre es damit?

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

Das sollte genügen.

---

UPDATE: Da Sie sich in Ihrer Beschreibung nicht explizit dazu äußern, bin ich davon ausgegangen, dass Sie meinen, dass Sie letztendlich alle anzeigen wollen und dass wir fertig sind, sobald sie sichtbar sind. Wenn nicht, erklären Sie bitte weiter, damit ich dies aktualisieren kann (wenn Sie nicht bereits bestimmen können, was Sie aus dem Code, den ich zur Verfügung gestellt habe).

Answer 3

Ich würde folgendermaßen vorgehen (ungetestet) :

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