如何防止 forEach 循环内的函数被多次调用？ 在大多数情况下，它可预测地重复

问题描述

我有一个包含在 forEach 循环中的函数，它会不可预测地重复

function setColorColumns(id) {
  getID = id.replace("#","");
  color_ranges.forEach((item) => {
  colorRangeDivs += `<div class="col ${item.colorGroup.toLowerCase()}" title="${item.colorGroup}" style="background:${item.colorGroup.toLowerCase()}">`;
  colorRangeDivs += `<label for="chk_${getID}_${item.colorGroup.toLowerCase()}">`;
  colorRangeDivs += `<input type="checkBox" id="chk_${getID}_${item.colorGroup.toLowerCase()}"></label></div>\n`;
  });
  return colorRangeDivs;
}

namedColors.forEach((item) => {
  colorDiv = setColorColumns(item.hex);
  colorTable1 = `<div class="color_table_row"><div class="col2"     style="background:${item.hex}">`;
  colorTable2 = `${item.color} (${item.hex})</div>`;
  colorTable3 = `</div>`;
  colorTable += `${colorTable1}${colorTable2}${colorDiv}${colorTable3}`;
});  

setColorColumns() 函数创建复选框，这就是每次迭代重复的内容。如果有的话，我认为整行都会重复，但显然我错过了一些东西......

这是一个 CodePen 版本：https://codepen.io/NoahBoddy/pen/WNpzMbV

解决方法

您可以在 index 循环中使用 foreach 来解决此问题。

// FOREACH
namedColors.forEach((item,index) => {
  if(index === 0) {
    colorDiv = setColorColumns(item.hex);
  }
  colorTable1 = `<div class="color_table_row"><div class="col2" style="background:${item.hex}">`;
  colorTable2 = `${item.color} (${item.hex})</div>`;
  // this is the line that's getting me in trouble
  colorTable3 = `</div>`;
  colorTable += `${colorTable1}${colorTable2}${colorDiv}${colorTable3}`;
  
});