新手 Javascript 问题 - 在 while 循环中获取

Question

我的主要程序流程应该是：

• 读取 JSON（获取 api）
• 用 json 做一些事情
• 重复

问题是我无能为力 - 而由于 fetch api 的异步性质。

基本上，下面的 main() 方法应该无限重复

到目前为止我的代码：

 let playbook = []; let slideIndex = 0; let reinitialize = true; function main() { loadJSON().then(r => initializeSlideshow()); } async function loadJSON() { let response = await fetch('playbook.json'); if (response.status === 200) { playbook = await response.json(); } playbook.sort(function (x, y) { return x.order - y.order; }); } function initializeSlideshow() { playbook.forEach((photo, i) => { //console.log(photo); let div = document.createElement("div"); div.className = "mySlides fade"; div.style.display = "none"; let img = document.createElement("img"); img.src = photo.uuid; img.style = "width:100% height:100%"; div.appendChild(img); document.querySelector(".slideshow-container").appendChild(div); }) startSlideShow(); } async function startSlideShow() { let slides = document.getElementsByClassName("mySlides"); slideIndex = 0 do { console.log(playbook[slideIndex].enabled) console.log(playbook[slideIndex].duration) if (playbook[slideIndex].enabled == 'true') { slides[slideIndex].style.display = "block"; //setTimeout(startSlideShow, playbook[slideIndex].duration); // Change image every 2 seconds await new Promise(r => setTimeout(r, playbook[slideIndex].duration)); slides[slideIndex].style.display = "none"; } slideIndex++; } while (slideIndex < slides.length) }

Answer 1

在这种情况下可以使用 Async/Await。 while(true)将创建一个无限循环。 您的main function 将如下所示 -

async function main() {
  while(true) {
    await loadJSON();
    await initializeSlideshow();
  }
}

async function initializeSlideshow() {
   // Logic to append images
    await startSlideShow();
}