javascript - 在 Chrome 调试器工具中设置超时

Question

我尝试在 Chrome 调试器工具中运行脚本。在脚本中我想等待(例如渲染动画后的按钮)。我怎样才能做到这一点？我找到了一些类似的解决方案:

async function test () {
    console.log('1');
    await setTimeout(function() {
        console.log('2');
    }, 3000);
    console.log('3');   
}

我原本期望打印 1, 2，三秒后打印 3。但结果是 1,3，三秒后打印 2。

我想对几个连续的操作执行此操作。

知道我该怎么做吗？

Answer 1

你不能await setTimeout 的结果函数，因为它不是 Promise 。为了做你想做的事，你可以创建一个 Promise 3 秒后解析，下面是一个示例:

async function test() {
  console.log('1');
  console.log('2');
  await new Promise(resolve => {
    setTimeout(resolve, 3000);
  });
  console.log('3');
}

test();

根据您的描述，您似乎想在某些 DOM 元素可用时访问它们，有 MutationObserver为此，这里有一个示例:

const parent = document.querySelector('#parent');

setTimeout(() => {
  const button = document.createElement('button');
  button.textContent = 'BUTTON';
  button.id = 'targetBtn';
  parent.appendChild(button);
}, 2000);

const observer = new MutationObserver((mutationList) => {
  mutationList.forEach((mutationRecord) => {
    if (mutationRecord.addedNodes && mutationRecord.addedNodes.length) {
      const btn = [...mutationRecord.addedNodes].find(n => n.matches && n.matches('#targetBtn'));
      if (btn) {
        console.log('Button #' + btn.id + ' was found');
      }
    }
  });
});
observer.observe(parent, {
  childList: true
});

<div id="parent">
</div>

它的作用是监视 #parent元素的子列表查看时#targetBtn元素已添加。

这有点矫枉过正，更好的解决方案是监视导致目标元素可用的事件。