Question

我正在尝试使第二个功能等待第一个功能完成。在下面的示例中，我无法实现。在探讨异步/等待时，据说执行顺序是顺序的。但是，这里似乎并非如此。

function one() {
  setTimeout(() => {
    console.log('Hi')
  }, 5000)
}

function two() {
  setTimeout(() => {
    console.log('Bye')
  }, 2000)
}

async function doAll() {
  await one();
  await two();
}
async function demo() {
  await doAll();
}

demo()

输出

Bye
Hi

在此示例中，由于功能二占用的时间更少，因此在'Bye'之前打印'Hi'。但是我试图确保第一个函数何时完成其执行，然后应该转到第二个函数。

Answer 1

这是因为无法await编辑您定义的函数，因为它们不会返回可以解决的承诺。相反，它们可以立即完成/立即“解决”。

function one() {
  return new Promise(resolve => {
    setTimeout(() => {
      console.log('Hi')
      resolve();
    }, 5000)
  })
}

function two() {
  return new Promise(resolve => {
    setTimeout(() => {
      console.log('Bye')
      resolve();
    }, 2000)
  })
}

async function doAll() {
  await one();
  await two();
}
async function demo() {
  await doAll();
}

demo()

Answer 2

我认为，承诺必须是：

function one() {
    return new Promise(resolve => {
       setTimeout(() => {
          console.log('Hi')
          resolve(x);
       }, 5000);
    });
}


function two() {
    return new Promise(resolve => {
       setTimeout(() => {
          console.log('Bye')
          resolve(x);
       }, 2000);
    });
}

Answer 3

您在这里遇到了多个问题。首先，您的函数one（）和two（）不是异步的，因此无法等待它们。其次，带有超时的测试代码不是准确的测试。超时功能也不是异步的，要解决此问题，我将其包装在Promise中，以便我们可以使用超时功能进行测试。

请参见摘要：

async function one(){
  await timeout(5000);
  log("Hi");
}

async function two(){
  await timeout(2000);
  log("Bye");
}

async function demo()
{
  await one();
  await two();
}

demo();

function log(logText)
{
  var logNode = document.createTextNode(logText + " ");  
  document.getElementById("log").appendChild(logNode);
}

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

#log
{
  border: 1px solid black;
  width: 300px;
  height: 150px;
}

<div id="log"></div>

Answer 4

首先，您必须知道 setTimeout（）在单独的线程中运行，并且即使您使其异步，主线程中的programm执行也不会停止。

为了满足您的要求，您必须在计时器完成后调用第二个功能

async function one(){
  await setTimeout(()=>{
  console.log('Hi')
  two() //call the second function when the first timer is completed.
  },5000)
}

function two(){
  setTimeout(()=>{
  console.log('Bye')
  },2000)
}

Answer 5

function one() {
  return new Promise(resolve => {
    setTimeout(() => {
     resolve(console.log("hi"))
    }, 5000);
  });
}
function two() {
  setTimeout(() => {
    console.log('Bye')
  }, 2000)
}
async function asyncCall() {
  var result1 = await one();
  var result2 = await two();
}

asyncCall();

等待第一次等待完成，再等待第二次等待-Async / await

5 个答案: