javascript - 在 setInterval 时间中使用 JSON 变量

Question

我有一个脚本，当前采用 json 对象并通过 pageID 将其转换为数组，其中包含“内容”数组。

这工作正常，我在页面加载时调用它，然后在 setInterval 内调用它。这也有效，但我将其修改为使用当前页面元素的“持续时间”值，并且它不是动态的，但实际上看起来它只是使用最后一个元素的持续时间值(这对于数组来说是有意义的，我猜)

如何更改此设置，以便当前的 setInterval 计时器始终是当前元素的“持续时间”值？

您可以运行下面的代码片段来查看当前函数

const obj = [{
    "pageID": "93",
    "page_type_id": "2",
    "display_id": "2",
    "slide_order": null,
    "duration": "10",
    "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": "10",
    "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": "1",
    "display_id": "2",
    "slide_order": null,
    "duration": "15",
    "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<\/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');


const pages_array = obj.reduce(function(pages_array, item, index, obj) {
  const current_pageID = item.pageID;
  const current_pageType = item.page_type_id;
  const duration = item.duration;
  const exisiting_page = pages_array.find(page => page.pageID === current_pageID);

  if (exisiting_page === undefined) {
    const new_Page = {
      pageID: current_pageID,
      pageType: current_pageType,
      duration: duration,
      content: [item]
    }
    pages_array.push(new_Page);
  } else {
    exisiting_page.content.push(item)
  }

  return pages_array;
}, []);

/*Call reloadFunction immediately so there's no initial delay*/
reloadFunction();

/*then call it withing setInterval to use the 'duration' value in json and convert to milliseconds*/
//setInterval(reloadFunction, parseInt(pages_array[counter].duration) * 1000);

function reloadFunction() {
  const currentJSONobject = pages_array[counter];

  fullContent.innerHTML = '';
  rightContent.innerHTML = '';
  leftContent.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;


      fullColumn.style.display = "block";


      leftColumn.style.display = "none";
      rightColumn.style.display = "none";

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

      leftColumn.style.display = "block";
      rightColumn.style.display = "block";

      fullColumn.style.display = "none";

    }
  }

  console.log(pages_array[counter]);
  console.log(setInterval);

setTimeout(reloadFunction, parseInt(pages_array[counter].duration) * 1000);

  counter += 1;
  if (counter === pages_array.length) {
    counter = 0;
  }

}
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" style="align-items: center;">

    <div class="leftContent" id="leftContent" style=" margin:auto; height: 100%; ">

    </div>
  </div>

  <div class="col-lg-6 rightColumn" id="rightColumn">

    <div class="rightContent" id="rightContent" style=" height: 100%; ">

    </div>

  </div>
</div>

Answer 1

由于 setInterval 超时无法更改，请使用连续调用 setTimeout。

/*Call reloadFunction immediately so there's no initial delay*/
// keep this
reloadFunction();

/*then call it withing setInterval to use the 'duration' value in json and convert to milliseconds*/
// get rid of this
//setInterval(reloadFunction, parseInt(pages_array[counter].duration) * 1000);

function reloadFunction() {
  // most of your code

  setTimeout(reloadFunction, parseInt(pages_array[counter].duration) * 1000);

  counter += 1;
  if (counter === pages_array.length) {
    counter = 0;
  }
}