函数在等待后中止

Question

在浏览器扩展中，我正在尝试：

找到一个按钮
每秒更新其文本，持续 10 秒
调用提交

很简单，可惜我是JavaScript新手

我很无能：为什么下面的代码没有到达第 15 行（等待之后）？

const Timeout = 10000;
const CountdownStep = 1000;

async function scheduleSubmit(node, timeout) {
  originalTextContent = node.textContent;
  while (timeout > 0) {
    console.log(`Timeout: ${timeout}`);
    try {
      await new Promise((resolve => setTimeout(() => {
        console.log(`[Promise] Timeout: ${timeout}`);
        node.textContent = `${originalTextContent} (${timeout / 1000})`;
        timeout -= CountdownStep;
        console.log(`[Promise] Timeout: ${timeout}`);
      }, CountdownStep)));
      console.log('Hello? Helloooooooo??');
    } catch (err) {
      log(`Error: ${err}`);
    }
  }
  node.submit();
}

scheduleSubmit(document.getElementById('foo'), Timeout);

<html><body>
<button type="button" id="foo">Run</button> 
</body></html>

Answer 1

您只需要调用 resolve() 解决 Promise:

const Timeout = 10000;
const CountdownStep = 1000;

async function scheduleSubmit(node, timeout) {
  originalTextContent = node.textContent;
  while (timeout > 0) {
    console.log(`Timeout: ${timeout}`);
    try {
      await new Promise((resolve => setTimeout(() => {
        console.log(`[Promise] Timeout: ${timeout}`);
        node.textContent = `${originalTextContent} (${timeout / 1000})`;
        timeout -= CountdownStep;
        console.log(`[Promise] Timeout: ${timeout}`);
        resolve();
      }, CountdownStep)));
      console.log('Hello? Helloooooooo??');
    } catch (err) {
      log(`Error: ${err}`);
    }
  }
  node.submit();
}

scheduleSubmit(document.getElementById('foo'), Timeout);

<html><body>
<button type="button" id="foo">Run</button> 
</body></html>

文档：https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Global_Objects/Promise

Answer 2

如果您提取一个简单的 delay 帮助程序，returns 一个在指定时间后解析的 Promise，您的代码将变得更具可读性。更不用说你可以单独测试和调试你的代码来确定问题。

const SUBMIT_TIMEOUT = 10000;
const COUNT_DOWN_STEP = 1000;

function delay(timeout) {
  return new Promise(resolve => setTimeout(resolve, timeout))
}

async function scheduleSubmit(node, timeout) {
  const originalTextContent = node.textContent;
  while (timeout > 0) {
    try {
      await delay(COUNT_DOWN_STEP);
      
      node.textContent = `${originalTextContent} (${timeout / 1000})`;
      timeout -= COUNT_DOWN_STEP;
    } catch (err) {
      log(`Error: ${err}`);
    }
  }
  node.submit();
}

scheduleSubmit(document.getElementById('foo'), SUBMIT_TIMEOUT);

<html><body>
<button type="button" id="foo">Run</button> 
</body></html>

函数在等待后中止

Function aborts after await

javascript

promise