Javascript 在对象数组中循环时调用方法

在循环遍历对象列表及其所有属性时，如何调用方法

目前，我正试图在对象的一个属性中执行setTimeout（），然后在setTimeout（）完成延迟后继续执行下一个属性。我还想在继续打印语句中的字符串的同时，在数组列表的下一步向DOM追加一个li

如果您有任何建议，我们将不胜感激，谢谢

下面是javascript：

const lvls = {
 start: {
    lvlTitle: 'Lets Start!',
    delay: setTimeout(function () {
      console.log("On Lets Start click I am supposed to wait a few seconds and then proceed on to the next lvl..");
}, 1000)
  },
  lvl1: {
    lvlTitle: 'Drinks/Soda/water',
    statement1: 'lvl1 info...',
    statement2: 'lvl1 more info...',
    statement3: 'lvl1 more more info' && function createContent1() {
      var ul = document.querySelector('.text-container');
      var li = document.createElement('li');
      li.appendChild(document.createTextNode('more text in this new div'));
      ul.appendChild(li);
    }
   },
   lvl2: {
     lvlTitle: 'Portion Control/Meals',
     statement1: 'lvl2 info...',
     statement2: 'lvl2 more info...',
     statement3: 'lvl2 more more info' && function createContent2() {
       var ul = document.querySelector('.text-container');
       var li = document.createElement('li');
       li.appendChild(document.createTextNode('more text in this new div'));
       ul.appendChild(li);
     }
   }
 }

 function* deepValuesIterator(o) {
   if (typeof o === 'object') {
     for (const value of Object.values(o)) {
      yield* deepValuesIterator(value)
    }
    } else {
     yield o
    }
 }

 function* nextLevel(levels, generator, element) {
   while (true) {
     for (const value of generator(levels)) {
      yield element.textContent = value
     }
   }
 }

 const printText = document.querySelector('.text-container')
 const lvlsIterator = nextLevel(lvls, deepValuesIterator, printText)

 printText.addEventListener('click', () => lvlsIterator.next())

 lvlsIterator.next()

以下是HTML：

<div class="full-page">
 <div class="click-container">
  <ul class="text-container">
    <li class="text-content">
      <div></div>
    </li>
  </ul>
</div>

最后是一个JSFIDLE：

---

函数具有不同的类型，因此您的代码没有调用函数

function* deepValuesIterator(o) {
  console.log('')
  if (typeof o === 'object') {
    console.log('objects')
    console.log(o)
    for (const value of Object.values(o)) {
      yield* deepValuesIterator(value);
    }
  } else if(typeof o === 'function'){
    console.log('function');
    yield o();
  } else {
    console.log(' not       objects')
    console.log(typeof o )
    console.log(o)
    yield o;
  }
}

我在deepValuesIterator函数中添加了checkout for函数

function* deepValuesIterator(o) {
  console.log('')
  if (typeof o === 'object') {
    console.log('objects')
    console.log(o)
    for (const value of Object.values(o)) {
      yield* deepValuesIterator(value);
    }
  } else if(typeof o === 'function'){
    console.log('function');
    yield o();
  } else {
    console.log(' not       objects')
    console.log(typeof o )
    console.log(o)
    yield o;
  }
}

在循环遍历对象列表及其所有属性时，如何调用方法

这相当简单，迭代时只需检查属性是否为函数，如果是，则调用它

目前，我正试图在对象的一个属性中执行setTimeout（），然后在setTimeout（）完成延迟后继续执行下一个属性

这里有一些误解：

• 超时在脚本加载时开始，而不是在迭代器到达时开始，因为它不是一个方法，而只是属性表达式中的一个函数调用

• 超时不会延迟任何事情。不存在“阻塞js”，javascript通过回调解决了此类问题，但在迭代器本机上（目前）并不能很好地工作。但您可以编写一个常规函数，在迭代器上进行迭代，并将回调传递给每个生成的函数：

---

那么我们如何使用这个呢？像这样：

 function* stuff() {
   alert("test");
   yield function(cb) { setTimeout(cb, 1000); }
   alert("test2");
 }

 printText.addEventListener('click', waitIterate(stuff()));

---

您的原始代码仍然需要一些修改，这只是为了演示概念。

感谢您的回复，我仍然有在DOM中显示我的函数的问题。关于为什么会发生这种情况有什么建议吗？