如何随机显示一组使用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); 
})();