在 Chrome 调试器工具中设置超时答案

【问题标题】：Set Timeout in Chrome debugger tools在 Chrome 调试器工具中设置超时
【发布时间】：2020-02-28 05:32:09
【问题描述】：

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

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

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

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

知道我该怎么做吗？

【问题讨论】：

标签： javascript google-chrome settimeout javascript-debugger

【解决方案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 元素。

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

【讨论】：

【解决方案2】：

我认为你在问两个不同的问题。一个问题是如何等待元素成为 DOM，另一个问题是 JavaScript 中的异步操作是如何工作的。

对于等待元素显示在 DOM 中，最简单的解决方案（在我看来）是创建一个 while 循环并在元素存在时中断：

// NOTE: this code isn't tested nor I have tried to see if it works

let elem = document.querySelector('.someSelector');

while(!elem) {
  elem = document.querySelector('.someSelector');
}

// do something else when the element shows

请记住，这可能会导致内存泄漏问题。

我希望打印 1、2 和三秒后 3。

你的期望是错误的。 setTimeout 的工作方式是将您的回调函数添加到单独的堆栈中，并在您定义的毫秒数后调用它。如果你想在 3 秒后显示三个，你必须这样做：

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

或者使用异步/等待

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

【讨论】：

【解决方案3】：

正如其他人所提到的，await 等待承诺得到解决或拒绝。 setTimeout 不返回 Promise，因此执行移至输出 3 的下一行。有用的阅读：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function

就等待元素而言，这取决于您使用的框架。对于纯 JavaScript，除了使按钮可见之外，您还可以触发自定义事件。 React 有一些方法可以让你根据某些 prop 更改触发操作。

【讨论】：