Javascript 从数组中随机加载图像的脚本，在查看完所有图像之前不重复任何操作

我正在运行一个脚本，该脚本在每次刷新页面时从数组随机加载一个图像。这个脚本以及我在网上看到的所有其他类似脚本的一个不受欢迎的特性是，尽管数组中有100多个图像，但在查看数组中的所有图像之前，它通常会多次加载同一图像

我想修改脚本，以防止在查看阵列中的所有图像之前调用同一图像两次。如果一个完全不同于我在这里采取的方法是可取的，请让我知道。另外，我对javascript的理解还很模糊，因此彻底解释如何纠正这个问题将非常有帮助

提前谢谢

以下是页面来源：

---

如果您确实想确保在所有图像都显示出来之前不会重复图像，可以使用

localstorage

存储已显示的索引列表

你可以用

localStorage['viewedItems'] = JSON.stringify(viewedItems)

要将数组保存到

localstorage

，其中viewedItems（第二个）是包含已显示的所有索引的数组的名称。然后您可以使用

JSON.parse(localStorage['viewedItems'])

在每次页面加载时检索数组，以查看已显示的内容。每次，您都在读取它，添加一个索引（选择一个索引，直到您得到一个不在此数组中的索引），然后编写它。一旦阵列的大小达到您拥有的图像数量，请清除它并重新开始

更新并希望更详细的解释

首先要从

localStorage

加载

viewedItems

数组。然后像以前一样选择一个随机数，看看该数字是否存在于

viewedItems

中。您可以使用。选择一个数字并检查是否存在代码将在一个循环中，这样您就可以一直这样做，直到找到数组中不存在的数字为止。显示该索引。然后，可以使用该方法将此索引添加到

viewedItems

数组中。最后，将

viewedItems

数组保存到

localStorage

伪代码

load viewedItems from localStorage

do
    r = random number
while viewedItems.indexOf(r) > -1

show xoxo[r]

viewedItems.push(r)

save viewedItems to localStorage

---

这可能不是最好的解决方案，但不妨试一试。第二个数组与第一个数组一样大，但要存储布尔值。第二个数组的索引与第一个数组的索引相对应。因此，当脚本给出24作为随机数时，它应该从

xoxo

数组返回第25个图像，并且应该将第二个数组中的第25个元素设置为false。例如：

// assume isAvailable is the array that holds the bools
function pickRandom(range) {
        checkAvailabilities(); // checks to see if all the images have been used
        if (Math.random) {
           while (true) {
               var choice = Math.round(Math.random() * (range-1));
               if (isAvailable[choice]) {
                  isAvailable[choice] = false;
                  return choice;
               }
           }
        }
        else {
            var now = new Date();
            return (now.getTime() / 1000) % range;
        }
}

function checkAvailabilities()
{
   // check if there are still some images that haven't been chosen
   for (var i = 0; i < isAvailable.length; i++)
      if (isAvailable[i])
         return; 
   // all the images have been used, so make all of them available again
   for (var i = 0; i < isAvailable.length; i++)
      isAvailable[i] = true;
}

//假设isAvailable是保存布尔值的数组
函数pickRandom（范围）{
checkAvailabilities（）；//检查是否已使用所有图像
如果（数学随机）{
while（true）{
var choice=Math.round（Math.random（）*（range-1））；
如果（可用[选择]）{
i可用[选择]=错误；
回报选择；
}
}
}
否则{
var now=新日期（）；
返回（now.getTime（）/1000）%range；
}
}
函数检查可用性（）
{
//检查是否还有一些图像尚未选择
对于（变量i=0；i

由于JavaScript数字可以保存超过50位的整数，因此3个数字可以跟踪150个文件

以下代码提供了用于创建、操作和查询由50位数字组成的数据结构的函数：

function Set (len) {
  // Establish an array of sufficient 50 bit numbers to hold len bits
  this.bits = new Array (Math.floor ((len + 49) / 50));
  this.len = len;
  // Clear all numbers
  for (var i = this.bits.length; i--;)
    this.bits[i] = 0;
}

Set.prototype.full = function () {
  // Check if all bits of the set at 1
  // First check the relevant bits of the last word
  if (this.bits[this.bits.length - 1] === Math.pow (2, this.len + 1) - 1)
    // Then chec tat all remaining numbers are full
    for (var i = this.bits.length - 1; i--;)
      if (bits[i] !== Math.pow (2, 51) - 1)
        return false;
  return true;
}

Set.prototype.check = function (n) {
  // Return value (0 or 1) of bit n of the set
  var m = n % 50; 
  return Math.floor (this.bits [(n - m) / 50] / Math.pow (2, m)) & 1;
}

Set.prototype.add = function (n) {
  // Set bit n of the set to 1 (unless it is already 1)
  if (!this.check (n)) {
    var m = n % 50; 
    this.bits [(n - m) / 50] += Math.pow (2, m);
    return true;
  }
  return false;
}

Set.prototype.remove = function (n) {
  // Set bit of the set to 0 (unless it is already 0)
  if (this.check (n)) {
    var m = n % 50; 
    this.bits [(n - m) / 50] -= Math.pow (2, m);
    return true;
  }
  return false;
}

Set.prototype.clear = function () {
  // Clear all bitsof the set to 0 
  for (var i = this.bits.length; i--;)
    bits[i] = 0;
}

---

洗牌数组并在其上迭代，或保留索引并递增。不过，在页面刷新过程中保持状态有点棘手。您可以使用

localStorage

来存储无序数组，但这在所有浏览器中都不起作用。到目前为止，这是唯一一个认为OP希望在请求之间保持状态的答案。谢谢Sachlen。你能告诉我如何在我的页面上实现这个功能吗？当然，我已经用一些细节和伪代码更新了我的答案。谢谢，这对我来说是有意义的。不过，我不确定保存布尔值的数组会是什么样子。可能是这样的：var isAvailable=new Array（）；//数组以容纳布尔值。。。isAvailable[0]=“（不确定此处的内容）”。。。等等？嗯，

isAvailable

告诉你哪些图像可用，因为你在脚本开始时没有使用任何图像，所以它们都可用，所以都是真的。好吧，但我必须创建一个名为isAvailable的数组。xoxo数组中的每个项都指向一个映像位置。IsAvailable数组中的项目指向什么？我将如何编写它？另外，我是否必须调用页面正文中的任何函数才能使isAvailable工作？

isAvailable

只是一个布尔数组，它们没有特殊的位置。您所要做的就是调用

isAvailable

，正如我上面所示。每次调用

pickRandom（）

函数时，

isAvailable

也将更新。我没有包括的一件事是初始化

isAvailable

，但这应该很容易。谢谢。这是否适用于我现有的脚本或替代它？我的代码只提供管理布尔集的函数。您还需要代码来使用这些函数并将设置值保存在cookie中。请看这里，文件数组中的名称似乎不正确：额外的空格。你有没有检查JS控制台上的错误消息？也删除

// assume isAvailable is the array that holds the bools
function pickRandom(range) {
        checkAvailabilities(); // checks to see if all the images have been used
        if (Math.random) {
           while (true) {
               var choice = Math.round(Math.random() * (range-1));
               if (isAvailable[choice]) {
                  isAvailable[choice] = false;
                  return choice;
               }
           }
        }
        else {
            var now = new Date();
            return (now.getTime() / 1000) % range;
        }
}

function checkAvailabilities()
{
   // check if there are still some images that haven't been chosen
   for (var i = 0; i < isAvailable.length; i++)
      if (isAvailable[i])
         return; 
   // all the images have been used, so make all of them available again
   for (var i = 0; i < isAvailable.length; i++)
      isAvailable[i] = true;
}

function Set (len) {
  // Establish an array of sufficient 50 bit numbers to hold len bits
  this.bits = new Array (Math.floor ((len + 49) / 50));
  this.len = len;
  // Clear all numbers
  for (var i = this.bits.length; i--;)
    this.bits[i] = 0;
}

Set.prototype.full = function () {
  // Check if all bits of the set at 1
  // First check the relevant bits of the last word
  if (this.bits[this.bits.length - 1] === Math.pow (2, this.len + 1) - 1)
    // Then chec tat all remaining numbers are full
    for (var i = this.bits.length - 1; i--;)
      if (bits[i] !== Math.pow (2, 51) - 1)
        return false;
  return true;
}

Set.prototype.check = function (n) {
  // Return value (0 or 1) of bit n of the set
  var m = n % 50; 
  return Math.floor (this.bits [(n - m) / 50] / Math.pow (2, m)) & 1;
}

Set.prototype.add = function (n) {
  // Set bit n of the set to 1 (unless it is already 1)
  if (!this.check (n)) {
    var m = n % 50; 
    this.bits [(n - m) / 50] += Math.pow (2, m);
    return true;
  }
  return false;
}

Set.prototype.remove = function (n) {
  // Set bit of the set to 0 (unless it is already 0)
  if (this.check (n)) {
    var m = n % 50; 
    this.bits [(n - m) / 50] -= Math.pow (2, m);
    return true;
  }
  return false;
}

Set.prototype.clear = function () {
  // Clear all bitsof the set to 0 
  for (var i = this.bits.length; i--;)
    bits[i] = 0;
}