Javascript：元素未从数组中删除

Question

我试图制作一个4x4的正方形网格，每1/4秒随机改变颜色。如果网格改变颜色，它的冷却时间为2秒，然后才能再次改变。我试图通过从数组中删除元素来实现此目的，然后当发生8次更改时，它会被添加回来。我的问题是，看起来元素实际上没有从数组中删除，我不确定原因。

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

http://jsfiddle.net/jb60r6dx/1/

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

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

    //remove changed grid
  removeEle(eligable[rand]);

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

Answer 1

我已将js代码更改为以下内容。 Trythis，它的工作

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

Answer 2

看起来你想念document.getElementById("colorvalue")这个元素在html中

所以这个功能总是停在document.getElementById("colorvalue").innerHTML

上

Answer 3

您的脚本中存在一些错误，导致其无法完全执行：

1. 您的小提琴中没有ID为if (node.equals(root)) this.root = null; 的元素。但我认为那是因为你粘贴了不完整的代码。

2. 您必须将colorvalue初始化为空数组，否则当您尝试在deleted函数上推送它时会出错。

3. 当数组已经为空时，您必须停止删除元素并尝试着色。在removeEle

中将代码包含在//find random element和//remove changed grid之间

喜欢这个fiddle

Answer 4

问题（除了几个脚本错误：deleted不是一个数组，所以你不能push或shift个元素，因为html不能通过id查询元素包含）是从eligable中删除8个元素，而您只添加一个元素。该脚本最初将运行流畅（在修复错误之后），直到eligable数组为空（然后脚本无法选择下一个元素，选择失败，因为您尝试从空数组中选择elemet）。

检查我的工作示例：

var eligable = [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());
  }
  
  // If there are no more eligable elements
  if(eligable.length == 0) {
    count++; // keep counting
    return;
  }
  
	//find random element
  var rand = Math.floor(Math.random() * eligable.length);
  var element = document.getElementById(eligable[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;

	//remove changed grid
  removeEle(eligable[rand]);
	
	//count cycle
  count ++;
  
}, 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);
  }
}

html,
body {
  margin: 0;
}

.w {
  overflow: hidden;
}

section div {
  background: #000;
  float: left;
  height: 24vw;
  margin: 1%;
  width: 23%;
}

section {
  margin: -1%;
  padding: 20px;
}

<div id="colorvalue"></div>
<div class="w">
  <section>
    <div id="0"></div>
    <div id="1"></div>
    <div id="2"></div>
    <div id="3"></div>

    <div id="4"></div>
    <div id="5"></div>
    <div id="6"></div>
    <div id="7"></div>

    <div id="8"></div>
    <div id="9"></div>
    <div id="10"></div>
    <div id="11"></div>

    <div id="12"></div>
    <div id="13"></div>
    <div id="14"></div>
    <div id="15"></div>
  </section>
</div>

Answer 5

在我看来，更好的方法是实现你想要的，在两个阵列上使用shuffle（符合条件并删除）。

基本上，您使用单个数组，并选择从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)

我在这里更新了你的小提琴：http://jsfiddle.net/56a1o2qb/2/

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