时间戳

首页 > 解决方案 > 在 Chrome 调试器工具中设置超时

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

问题描述

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

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

我希望在三秒后打印 1、2 和 3。但结果是 1,3，然后在三秒后打印 2。

我想为几个连续的动作做这件事。

知道我该怎么做吗？

标签： javascriptgoogle-chromesettimeoutjavascript-debugger

解决方案

你不能得到函数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添加元素。

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

推荐阅读