代码之家 › 专栏 › 技术社区 › Geoff_S

在setInterval时间中使用JSON变量

setinterval json html javascript

Geoff_S · 技术社区 · 6 年前

这很好,我在页面加载时调用它,然后在setInterval内调用它。这也行,但我修改了它,使用了当前页面元素的“duration”值,它不是动态的,但实际上它似乎只使用了最后一个元素的duration值(我想这对数组来说是有意义的)

如何更改此值,使当前的setInterval计时器始终为当前元素的“Duration”值?

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

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>

1 回复 | 直到 6 年前

James 6 年前

由于无法更改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;
  }
}