主页 / 问题 / 1424355
Accepted
user507812
Asked:2022-08-27 18:32:26 +0000 UTC2022-08-27 18:32:26 +0000 UTC

如何使用 async/await 等待 setTimeout 完成

  • 772

有一个任务，简单如耙子。三个操作 - 两个同步，它们之间的一个异步。异步任务必须连续第二个执行，而不是最后一个。计算的最终结果应该等于 1。如何使用async/await语法来实现这一点，而不使用全局 Promise 对象。下面是一个示例解决方案，但不正确。

为什么我需要这个，这个奇怪的代码是什么，它有什么意义，等等。这些问题都没有了。我花了几天时间解决这个问题，我联系的每个人都无法解决它。只是为了这个任务，我在这个网站上注册了，所以这对我来说很重要。

const summarize = (num1, num2) => num1 + num2;
const divide = (num1, num2) => num1/num2;

let x = 2;
let y = 6;
let z = 10;

const calcAsync = async () => {
  x = summarize(x, x);                           // (1шаг) 2 + 2 = 4
  x = await setTimeout(() => summarize(x, y), 1);// (2шаг) ??? должно получится 4 + 6 = 10
  x = divide(x, z);                              // (3шаг) ??? должно получится 10/10 = 1
}

calcAsync();
javascript async-await

3 个回答

  1. 您应该将其包装setTimeout在Promise中：

    const summarize = (num1, num2) => num1 + num2;
const divide = (num1, num2) => num1 / num2;

let x = 2;
let y = 6;
let z = 10;

const calcAsync = async() => {
  x = summarize(x, x);
  
  console.log(1, x);
  
  x = await new Promise((resolve, reject) => {
    setTimeout(() => resolve(summarize(x, y)));
  });
  
  console.log(2, x);
  
  x = divide(x, z);
  
  console.log(3, x);
}

calcAsync();

    解释为什么你不能没有Promise：

    PS 形式上，这种说法是不正确的。正如@GrundyPromise所示，将其替换为最普通thenable的对象（具有方法的对象）就足够了then，在这种情况下，一切都将与 with 完全相同Promise。但是这个答案会让您了解为什么await-tit 或 wrap in asyncf- yu 无济于事setTimeout

    考虑这段代码：

    const calcAsync = async () => {
  x = summarize(x, x);
  x = await setTimeout(() => summarize(x, y), 1);
  x = divide(x, z);
}

    因为 async/await返回并运行Promise，然后让我们将这段代码翻译成Promise-ov 语言：

    const calcAsync = () => {
  return Promise.resolve()
    .then(function () {
      x = summarize(x, x);

      return setTimeout(() => summarize(x, y), 1);
    })
    .then(function (handleResolved) {
      x = handleResolved;
      x = divide(x, z);
    });
};

    所以我们对带有 的字符串感兴趣setTimeout。文档说它将从 -a -thisthen接收2 个参数，并且还说它也会返回。我们只对 感兴趣，因此将进一步省略。所以第二个输入将收到一个返回值——这是timeoutID的数量，启动什么函数以及何时启动都无关紧要。因此，在第二个中，其中的行将被写入数字PromisehandleResolvedhandleRejectedPromisehandleResolvedhandleRejectedthensetTimeoutthenx = handleResolvedxtimeoutID并将使用该值进行进一步的计算。重要的是，这个数字每次都会不同，在一个会话中重新启动相同的代码会给你不同的值。

    演示代码（特意去掉x = await...，以免他们认为一切都是因为x它被写入了某个东西）：

    const summarize = (num1, num2) => num1 + num2;
const divide = (num1, num2) => num1 / num2;

let x = 2;
let y = 6;
let z = 10;

const calcAsync = async() => {
  x = summarize(x, x);

  console.log(await setTimeout(() => summarize(x, y)));
  console.log(await setTimeout(() => summarize(x, y)));
  console.log(await setTimeout(() => summarize(x, y)));
  console.log(await setTimeout(() => summarize(x, y)));

  x = divide(x, z);
}

calcAsync();

    我们还需要获取x第二个中的值。thensummarize(x, y)

    作者提出了一个选项来包装setTimeoutf async-th 因为。async返回给我们Promise。我注意到在包装器中写这样的东西就像return await setTimeout没有包装器一样没用。让我们看看在这种情况下会发生什么：

    const asyncSum = async () => {return setTimeout(() => summarize(x, y), 1)}

const calcAsync = async() => {
  x = summarize(x, x);
  
  x = await asyncSum();
  
  x = divide(x, z);
}

    将其重写为Promise-ov 我们得到：

    const asyncSum = () => {
  return Promise.resolve().then(function () {
    return setTimeout(() => summarize(x, y), 1);
  });
};

const calcAsync = () => {
  return Promise.resolve()
    .then(function () {
      x = summarize(x, x);

      return asyncSum();
    })
    .then(function (handleResolved) {
      x = handleResolved;
      x = divide(x, z);
    });
};

    现在我们可以安全地将函数的结果替换asyncSum为调用它的位置并得到：

    const calcAsync = () => {
  return Promise.resolve()
    .then(function () {
      x = summarize(x, x);

      return Promise.resolve().then(function () {
        return setTimeout(() => summarize(x, y), 1);
      });
    })
    .then(function (handleResolved) {
      x = handleResolved;
      x = divide(x, z);
    });
};

    我们看到了什么？我们再次发送到handleResolved我们timeoutID的。因此，这里的包装器也无助于发送值本身summarize(x, y)

    现在我们弄清楚了为什么不能await包装async我们的，让我们看看-thsetTimeout包装器如何帮助我们：Promise

    const calcAsync = async() => {
  x = summarize(x, x);
  
  x = await new Promise((resolve) => {
    setTimeout(() => resolve(summarize(x, y)), 1);
  });
  
  x = divide(x, z);
}

    我们再次将其重写为Promise-ov 语言并得到：

    const calcAsync = () => {
  return Promise.resolve()
    .then(function () {
      x = summarize(x, x);

      return new Promise((resolve) => {
        setTimeout(() => resolve(summarize(x, y)), 1);
      });
    })
    .then(function (handleResolved) {
      x = handleResolved;
      x = divide(x, z);
    });
};

    现在您可以看到我们在字符串中显式handleResolved传递了 f-ii 的值。这里的重点是，在调用/解决下一个之前，下一个将等待，无论需要多长时间summarize(x, y)resolve(summarize(x, y))resolvethen

    PS文档说这段代码：

    async function foo() {
   return 1
}

    如同：

    function foo() {
   return Promise.resolve(1)
}

    但我将其重写为：

    function foo() {
  return Promise.resolve().then(function () {
    return 1;
  });
}

    在论点和示例本身中，这不会影响任何事情。如果按照文档中所示重写，整个逻辑将完全相同，但为了不经常在方法resolve和之间切换then，我决定如果总是then有 ，那么混乱就会减少，这将有助于更好地理解什么正在发生。我希望我能够做到这一点:)

    • 6
  2. Best Answer

    您可以使用await可以应用于thenable对象的东西，即带有then.

    与构造函数类似Promise，该方法then也接受两个参数resolve和reject。

    const summarize = (num1, num2) => num1 + num2;
const divide = (num1, num2) => num1 / num2;

let x = 2;
let y = 6;
let z = 10;

const calcAsync = async() => {
  x = summarize(x, x); // (1шаг) 2 + 2 = 4
  console.log('(1шаг)', x);
  x = await {
    then(r) {
      setTimeout(() => r(summarize(x, y)), 1)
    }
  }; // (2шаг) ??? должно получится 4 + 6 = 10
  console.log('(2шаг)', x);
  x = divide(x, z); // (3шаг) ??? должно получится 10/10 = 1
  console.log('(3шаг)', x);
}

calcAsync();

    • 3 
  3. await setTimeout(() => summarize(x, y), 1);
    1. setTimeoutawait立即返回定时器的id，从这里没有意义。
    2. summarize并且通常不使用调用的结果。
    3. 1ms 很奇怪。最有可能在这里和零或缺少的论点还不错。

    它应该是这样的：

    x = await new Promise(resolve => setTimeout(resolve, 0, summarize(x, y)))

    尽管在任何情况下，整个构造都假设结果是同步已知的，因此尚不清楚它为什么会发生。

    只需要有async/await，没有Promise，没有then()，代码应该尽量和同步类似。

    它不会那样工作：await它适用于then.

    • -1

相关问题