我正在重构一些代码，尝试通过定时器更改页面内容。我正在循环一个原始的JSON对象，创建一个与页面ID相关的子内容数组。目前，通过console.log，我有正确的对象和结构。
问题在于，我正在尝试使用setInterval函数循环page_ids, 然后在其中循环内容数组以正确地填充html。我认为我已经正确地将 setInterval 循环应用到了页面，但不确定如何循环内部的内容。
对于下面的示例，它应该在页面加载时在左侧div中显示"left 93"，在右侧div中显示 "right 93"，然后在时间间隔之后会切换到页面 ID 94 并在 div 中显示 "Page 94"。
如何在 setInterval 中修改循环结构？
Fiddle链接：https://jsfiddle.net/nr37tL9j/6/
问题在于，我正在尝试使用setInterval函数循环page_ids, 然后在其中循环内容数组以正确地填充html。我认为我已经正确地将 setInterval 循环应用到了页面，但不确定如何循环内部的内容。
对于下面的示例，它应该在页面加载时在左侧div中显示"left 93"，在右侧div中显示 "right 93"，然后在时间间隔之后会切换到页面 ID 94 并在 div 中显示 "Page 94"。
如何在 setInterval 中修改循环结构？
Fiddle链接：https://jsfiddle.net/nr37tL9j/6/
const original_json = [{
"pageID": "93",
"page_type_id": "2",
"display_id": "2",
"slide_order": null,
"duration": "74",
"background_img": "images\/bg_rainbow.svg",
"panel_id": "86",
"panel_type_id": "2",
"cont_id": "138",
"contID": "138",
"content": "\r\n\r\n\r\n<\/head>\r\n\r\nLeft 93<\/p>\r\n<\/body>\r\n<\/html>"
},
{
"pageID": "93",
"page_type_id": "2",
"display_id": "2",
"slide_order": null,
"duration": "74",
"background_img": "images\/bg_rainbow.svg",
"panel_id": "87",
"panel_type_id": "3",
"cont_id": "139",
"contID": "139",
"content": "\r\n\r\n\r\n<\/head>\r\n\r\nRight 93<\/p>\r\n<\/body>\r\n<\/html>"
},
{
"pageID": "94",
"page_type_id": "2",
"display_id": "2",
"slide_order": null,
"duration": "74",
"background_img": "images\/bg_rainbow.svg",
"panel_id": "87",
"panel_type_id": "3",
"cont_id": "139",
"contID": "139",
"content": "\r\n\r\n\r\n<\/head>\r\n\r\nPage 94<\/p>\r\n<\/body>\r\n<\/html>"
},
{
"pageID": "95",
"page_type_id": "2",
"display_id": "2",
"slide_order": null,
"duration": "74",
"background_img": "images\/bg_rainbow.svg",
"panel_id": "87",
"panel_type_id": "3",
"cont_id": "139",
"contID": "139",
"content": "\r\n\r\n\r\n<\/head>\r\n\r\nPage 95<\/p>\r\n<\/body>\r\n<\/html>"
}
];
let counter = 0;
var fullContent = document.getElementById('fullContent');
var leftContent = document.getElementById('leftContent');
var rightContent = document.getElementById('rightContent');
var fullColumn = document.getElementById('fullColumn');
var leftColumn = document.getElementById('leftColumn');
var rightColumn = document.getElementById('rightColumn');
// loop through original json
// for each item, get page ID and see if we've already created a new Page object for it
// if we have, add the object from the original json to the "content" array of the new page object
// otherwise, create a new Page object to put in our new array
const pages_array = original_json.reduce(function(pages_array, item, index, original_json){
const current_pageID = item.pageID;
const exisiting_page = pages_array.find(page => page.pageID === current_pageID);
if (exisiting_page === undefined){
const new_Page = {
pageID: current_pageID,
content: [item]
}
pages_array.push(new_Page);
} else {
exisiting_page.content.push(item)
}
return pages_array;
}, []);
// Open console to see data
console.clear();
console.log(pages_array);//this prints correct array
setInterval(()=>{//here I loop through pages, but i need to loop within here over content to render html
const currentJSONobject = pages_array[counter];
if(currentJSONobject.page_type_id == 2){
fullColumn.style.display = "none";
if(currentJSONobject.panel_type_id == 2){
leftContent.innerHTML = currentJSONobject.content;
}else if(currentJSONobject.panel_type_id == 3){
rightContent.innerHTML = currentJSONobject.content;
}
}
counter += 1;
if (counter === pages_array.length){
counter = 0;
}
console.log(currentJSONobject.content);
}, 1500)<div class="row middle" id="middle" style="background-image: url();">
<!-- Half Page Divs -->
<div class="col-lg-6 leftColumn">
<div class="leftContent" id="leftContent" style=" height: 100%; ">
</div>
</div>
<div class="col-lg-6 rightColumn">
<div class="rightContent" id="rightContent" style=" height: 100%; ">
</div>
</div>
<!-- End Half Page Divs -->
</div>
<!-- End Row Middle -->更新：
