如何隨機顯示一組使用jQuery的元素？

Question

使用jQuery，你會如何每頁div.foo在一個隨機的順序，每X毫秒出現一個新的？

澄清：我想從隱藏所有這些元素開始，並以所有這些元素顯示結束，所以對於同一個元素兩次是沒有意義的。

我原本以爲我會創建一個數組，列出所有元素，隨機挑選一個，顯示一個，使用splice()將其從數組中移除，然後從剩餘列表中隨機選取下一個 - 等等。我的數組是jQuery對象的一部分，splice()不可用。

Answer 1

一個有趣的方式來做到這將是一個洗牌的功能擴展JavaScript的陣列基本對象。在Prototype中（除了jQuery.extend外，應該和JQuery一樣）。這是快速和骯髒的洗牌，還有很多其他方式來做到這一點。

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

因此，假如你有你的div蓄勢待發，調用洗牌（）方法，只需通過他們去一個接一個，按順序排列（他們現在正在洗牌），並告訴他們（根據您的間隔）。可能希望通過克隆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); 
})();