Javascript:未从数组中删除元素

我试着让一个4x4的正方形网格每1/4秒随机改变一次颜色。如果网格改变颜色，它将有2秒的冷却时间才能再次改变。我试图通过从数组中删除元素来实现这一点，然后当发生8个以上的更改时，它会被添加回来。我的问题是元素似乎并没有从数组中被删除，我不知道为什么

你可以在这里看到我的代码

看起来你错过了document.getElementByIdcolorvalue这个html元素

---

因此，函数始终在document.getElementByIdcolorvalue.innerHTML上停止。您的脚本中存在一些错误，无法完全执行：

小提琴中没有id为colorvalue的元素。但我认为这是因为粘贴了不完整的代码

您必须将deleted初始化为空数组，否则在尝试使用removeEle函数推送到它时会出现错误

当数组已为空时，必须停止删除元素并尝试为其着色。将代码包装在//find random element和//remove changed grid之间，格式为ifeliable.length

---

像这样

我将js代码更改为以下内容。是的，它起作用了

var eligable = new Array(0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15);
var deleted=[];
var count = 0;

function getRandomInt(min, max) {
  return Math.floor(Math.random() * (max - min + 1)) + min;
}

setInterval(function() {
    //re-add the element
    //8 cycles == 2 seconds
  if (count % 8 == 0 && count != 0) {
    eligable.push(deleted.shift());
  }

    //find random element
  var rand = Math.floor(Math.random() * eligable.length);
  var element = document.getElementById(eligable[rand]);
if(element){

}
if(element){
    //get random color
  var r = getRandomInt(0, 255);
  var g = getRandomInt(0, 255);
  var b = getRandomInt(0, 255);

    //change color
  element.style.backgroundColor = "rgb(" + r + "," + g + "," + b + ")";
  }
  var colorVal = document.getElementById("colorvalue")
  if(colorVal)
  colorVal.innerHTML = r + " " + g + " " + b;

    //remove changed grid
  removeEle(eligable[rand]);
    console.log(eligable);
    //count cycle
  count += 1;
}, 250);

//Removes the selected element and push to deleted array
function removeEle(ele) {
  deleted.push(ele);
  var index = eligable.indexOf(ele);
  if (index > -1) {
    eligable.splice(index, 1);
  }
}

---

除了几个脚本错误之外，还有一个问题：deleted不是数组，因此不能推送或移动元素，html不包含的按id查询的元素是，从eligable中删除了8个元素，而您只添加了一个。在修复错误后，脚本将首先运行fluid，直到可替换数组为空，然后脚本无法选择下一个元素，选择失败是因为您试图从空数组中选择elemet

检查我的工作示例：

var-eligable=[0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15]； 已删除的var=[]； var计数=0； 函数getRandomIntmin，max{ 返回Math.floorMath.random*max-min+1+min； } 设置间隔函数{ //重新添加元素 //8个周期==2秒 如果计数%8==0&&count！=0{ eligable.pushdeleted.shift； } //如果没有更多的可替换元素 ifeliable.length==0{ 计数+++；//继续计数 回来 } //寻找随机元素 var rand=Math.floorMath.random*eliable.length； var元素=document.getElementByIdeligable[rand]； //获得随机颜色 var r=getrandomint0255； var g=getrandomint0255； var b=getrandomint0255； //变色 element.style.backgroundColor=rgb+r+，+g+，+b+； document.getElementByIdcolorvalue.innerHTML=r++g++b； //删除已更改的网格 可拆卸的[兰德]； //计数周期 计数++； }, 250; //删除选定的元素并推送到已删除的数组 函数删除{ 删除.pushele； var指数=eligable.indexOfele； 如果索引>-1{ 可替代指数，1； } } html， 身体{ 保证金：0； } w{ 溢出：隐藏； } 分区{ 背景：2000人； 浮动：左； 高度：24vw； 利润率：1%； 宽度：23%； } 部分{ 利润率：-1%； 填充：20px； }

---

因此，在我看来，实现您想要的更好的方法是使用两个以上的数组

基本上，您使用单个数组，并选择从0到剩余数量的随机索引，然后将选择与剩余列表中的最后一个交换。这意味着数组的第一部分是可用项，而数组的最后一部分始终是已删除项

// here is an example of what your array could look
// like at a certain time using a shuffle
[1, 3, 5, 2, 11, 12, 15, 8, 4, 7, 10, 9, 6, 13, 14]
<------------ eligible ---------------^--deleted-->

例如：

var set = [...Array(16).keys()]
var lastAvailable = set.length - 1

const getRandItemShuffle = () => {
  // if 8 have been selected reset
  if(lastAvailable < 8){ lastAvailable = set.length - 1 }
  // get a random item from the leftovers
  var rIndex = getRandomInt(0, lastAvailable)
  var item = set[rIndex]
  // swap the selected with the last available
  set[rIndex] = set[lastAvailable]
  set[lastAvailable] = item
  // reduce the size of the available
  lastAvailable--
  return item
}

setInterval(() => {
  var rand = getRandItemShuffle()
  var element = document.getElementById(rand)

  //get random color
  var r = getRandomInt(0, 255)
  var g = getRandomInt(0, 255)
  var b = getRandomInt(0, 255)

  //change color
  element.style.backgroundColor = "rgb(" + r + "," + g + "," + b + ")"
  document.getElementById("colorvalue").innerHTML = r + " " + g + " " + b
}, 250)

我在这里用一个工作版本更新了你的小提琴：

编辑：我意识到如果你旋转所有的搜索，你希望搜索在2秒后重置，而不是4秒。我已经更新了代码和fiddle以反映更改，但是您需要做的就是将shuffle函数中的重置行更改为8，而不是0

var set = [...Array(16).keys()]
var lastAvailable = set.length - 1

const getRandItemShuffle = () => {
  // if 8 have been selected reset
  if(lastAvailable < 8){ lastAvailable = set.length - 1 }
  // get a random item from the leftovers
  var rIndex = getRandomInt(0, lastAvailable)
  var item = set[rIndex]
  // swap the selected with the last available
  set[rIndex] = set[lastAvailable]
  set[lastAvailable] = item
  // reduce the size of the available
  lastAvailable--
  return item
}

setInterval(() => {
  var rand = getRandItemShuffle()
  var element = document.getElementById(rand)

  //get random color
  var r = getRandomInt(0, 255)
  var g = getRandomInt(0, 255)
  var b = getRandomInt(0, 255)

  //change color
  element.style.backgroundColor = "rgb(" + r + "," + g + "," + b + ")"
  document.getElementById("colorvalue").innerHTML = r + " " + g + " " + b
}, 250)