JavaScript 异步/等待

Question

我正在尝试理解 JavaScript 异步/等待。我怎样才能重写下面的内容，使输出先是“Hi”然后是“Bye”而不是“Bye”然后是“Hi”:

JSFiddle

sayHi() 
.then(sayBye);

async function sayHi() {
  await setTimeout(function() {
    $("#myOutput").text('hi');
  }, 1000);
}

async function sayBye() {
  $("#myOutput").text('bye');
}

Answer 1

为了等待 setTimeout 它需要被包装到 Promise 中。然后使用 async/await 你可以扁平化你的代码，不用 Promise 然后编写 API:

(async () => { // await has to be inside async function, anonymous in this case
  await sayHi() 
  sayBye()
})()

async function sayHi() {
  return new Promise(function (resolve) {
    $("#myOutput").text('hi');
    setTimeout(function() {
      resolve()
    }, 1000)
  });
}

async function sayBye() {
  $("#myOutput").text('bye');
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="myOutput"></div>