Question

因此，下面的代码可以正常工作，它仅迭代一个json对象，并在一定间隔后将当前对象/数组中的内容设置为div的内容。截至目前，该时间为3.5秒。如果您运行该代码段，则会在3.5秒后看到“整页”，然后在3.5秒后看到“整页2”。

功能就在那里。

但是，我似乎无法理解如何做两件事：

仅设置第一个对象元素和页面加载之后的间隔（因此，不是页面加载-> 3.5秒，然后是第一个元素，我想要页面加载中的第一个元素，它将开始第一个3.5秒间隔。

和

您可以看到我的页面数组具有一个'duration'元素，其数字表示秒。有没有办法让我以此为间隔？

因此，我希望下面的示例在页面加载后立即显示“整页”，并在74秒后显示“整页2”

这是一个片段

const obj = [{
    "pageID": "93",
    "page_type_id": "1",
    "display_id": "2",
    "slide_order": null,
    "duration": "74",
    "background_img": "images\/bg_rainbow.svg",
    "panel_id": "86",
    "panel_type_id": "1",
    "cont_id": "138",
    "contID": "138",
    "content": "\r\n\r\n\r\n<\/head>\r\n\r\nFull Page<\/p>\r\n<\/body>\r\n<\/html>"
  },
  {
    "pageID": "94",
    "page_type_id": "1",
    "display_id": "2",
    "slide_order": null,
    "duration": "74",
    "background_img": "images\/bg_rainbow.svg",
    "panel_id": "87",
    "panel_type_id": "1",
    "cont_id": "139",
    "contID": "139",
    "content": "\r\n\r\n\r\n<\/head>\r\n\r\nFull Page 2<\/p>\r\n<\/body>\r\n<\/html>"
  },
];
    let counter = 0;

    var fullContent = document.getElementById('fullContent');

    const pages_array = obj.reduce(function(pages_array, item, index, obj) {
      const current_pageID = item.pageID;
      const current_pageType = item.page_type_id;
      const exisiting_page = pages_array.find(page => page.pageID === current_pageID);

      if (exisiting_page === undefined) {
        const new_Page = {
          pageID: current_pageID,
          pageType: current_pageType,
          content: [item]
        }
        pages_array.push(new_Page);
      } else {
        exisiting_page.content.push(item)
      }

      return pages_array;
    }, []);

    setInterval(()=>{
    const currentJSONobject = pages_array[counter]; 
    fullContent.innerHTML = '';

   for(var i = 0; i < currentJSONobject.content.length; i++){

        if(parseInt(pages_array[counter].pageType) == 1){
            console.log("Paren pageType => ", pages_array[counter].pageType);

            fullContent.innerHTML = currentJSONobject.content[i].panel_type_id == 1 ? currentJSONobject.content[i].content : fullContent.innerHTML;

        } if(parseInt(pages_array[counter].pageType) == 2){
            console.log("Paren pageType => ", pages_array[counter].pageType);

            leftContent.innerHTML = currentJSONobject.content[i].panel_type_id == 2 ? currentJSONobject.content[i].content : leftContent.innerHTML;
            rightContent.innerHTML = currentJSONobject.content[i].panel_type_id == 3 ? currentJSONobject.content[i].content : rightContent.innerHTML;

        } 
    }

    console.log(pages_array[counter])

    counter += 1; 
    if (counter === pages_array.length){
        counter = 0; 
    }

}, 3500)     
console.log(obj);
console.log(pages_array);

 <div class="row middle" id="middle" style="background-image: url();">
        <!-- Full Page Divs -->
        <div class="col-lg-12" id="fullColumn">
            <div class="fullContent" id="fullContent" style="height: 100%; ">
            </div>
        </div>
        <!-- End Full Page Divs -->

        <!-- Half Page Divs -->
        <div class="col-lg-6 leftColumn" id="leftColumn">
            
            <div class="leftContent" id="leftContent" style=" height: 100%; ">        

            </div>
        </div>

        <div class="col-lg-6 rightColumn" id="rightColumn">
            
          <div class="rightContent" id="rightContent" style=" height: 100%; ">

          </div>

        </div>
      </div>

间隔从页面加载开始，并使用json对象中的整数

0 个答案: