如何解决如何防止 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}`;
});
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。