setTimeout 和 Async await 有什么区别？

Question

我有点理解每个人在做什么。 setTimeout, "setTimeout() 方法在指定的毫秒数后调用函数或计算表达式。"异步等待，返回一个promise，只是一个函数，可以放入队列中，稍后检查函数的结果。

但两者都允许我“延迟代码”，它们都是异步函数。那么什么时候你会使用其中一种而不是另一种呢？

感谢您的帮助！

Answer 1

它们完全不同。

使用async/await 允许您在代码中以扁平方式使用Promise，而无需嵌套回调或难以阅读的.then 链。例如：

const doSomething = async () => {
  await asyncStep1();
  await asyncStep2();
  await asyncStep3();
};

每个异步步骤都返回一个 Promise。

await 只允许你“延迟”一个块中的代码，如果你已经有一个 Promise 可以使用（或者你转换为一个 Promise 的东西）。

setTimeout 与 async/await 完全不相似 - setTimeout 根本不消耗 Promise 或与 Promise 有任何关系。 setTimeout 允许您在超时时间结束后排队等待稍后调用的回调。

与await 不同，setTimeout 不会延迟代码块中的代码 - 相反，您向它传递一个回调，然后回调会在稍后被调用。

Answer 2

很酷的问题。

你说得对，它们都是异步代码。

作为差异的简单答案。如果你正在做类似的事情：

const fetchUser = async () => {
    const result = await fetch("/user");
    return await result.json();  
} 

async main1() {
    setTimeout(() => console.log("done", 2000)); 
}

async main2() {
    await fetchUser(); 
    console.log("done"); 
}

如果你没有在其他地方阻塞线程，setTimeout 在它记录“完成”之前总是需要大约 2000 毫秒。当 API 完成时，fetchUser 将记录“完成”，可能是 100 毫秒，也可能是 10000 毫秒。

但区别远不止于此：

这部分与回调风格的代码和承诺风格的代码的区别有关。

回调风格是一种较旧的编码方式，这里的区别不止于此。

让我们暂时搁置 setTimeout 并讨论两种可能进行 fetch 调用的方法。

const fetchUserOne = async() => {
  const result = await fetch('https://jsonplaceholder.typicode.com/todos/1');
  const json = await result.json();
  return json;

}

const fetchUserTwo = () => {
  return fetch('https://jsonplaceholder.typicode.com/todos/2')
    .then(response => response.json())
};


async function main() {
  const result1 = fetchUserOne(); 
  const result2 = fetchUserTwo();
  
  console.log(result1);
  console.log(result2)
  
  const awaitedResult1 = await result1; 
  const awaitedResult2 = await result2; 
  
  console.log(awaitedResult1); 
  console.log(awaitedResult2); 

  
}

main().then(console.log("complete"));

现在我想在这里强调的是，虽然第二个示例使用了回调样式 - 它们都使用了 Promise。

当您运行代码时（按 F12 查看完整的对象），您会注意到 result1 和 result2 的日志是承诺。

Window.setTimeout 另一方面不使用 Promise。

const result = setTimeout(() => {
  console.log("done");
}, 2000);

console.log(result);

setTimeout的返回值是一个数字，which can be used to cancel the timeout.

这给我们带来了主要区别：

Promise 不可取消，setTimeout 是

See this Stack Overflow question about cancelling a promise.

为了展示一个例子，让我们修改上面的例子。

const fetchUser = async () => {
    const result = await fetch("https://jsonplaceholder.typicode.com/todos/1");
    return await result.json();  
} 


let timeout; 

async function main1() {
    console.log("start main1"); 
    timeout = setTimeout(() => console.log("done timeout"), 2000); 
}

async function main2() {
    console.log("start main2"); 
    await fetchUser(); 
    console.log("done fetchuser"); 
}


main1(); 
main2(); 

clearTimeout(timeout); 

在上面，我们可以看到我们可以很容易地中止超时调用，而我们不能直接取消承诺。

这并不是说你不能取消那个获取请求，as you can see in this thread，而是你不能取消承诺本身。

Answer 3

首先，setTimeout 是依赖于给定时间的静态计时器。另一方面，async await 不是静态的。它将等到它等待函数或承诺返回任何response 或error

其次，你可以Timeout任何执行但你不能等待任何函数。

这里是官方文档Async await

Answer 4

setTimeout 允许您将执行延迟大约一段时间。

let log = () => console.log('log');

// invokes `log()` after a delay
setTimeout(log, 1000);

async/await 帮助你处理没有函数处理程序的承诺；它只是语法糖。它实际上并没有延迟执行。

let promise = Promise.resolve(5);

let main = async() => {
  // without await
  promise.then(value => console.log(value));
  
  // with await
  console.log(await promise);
};

main();

Answer 5

async await 和 setTimeout 并不相似，尽管它们看起来相似，但实际上并非如此。 如果您是 JavaScript 新手，您可以将 setTimeout 视为一个计时器，因此无论传递给 setTimeout 的任何代码块或函数，它都会在固定时间后执行，它基本上会延迟代码的执行，而另一方面是异步的await 不绑定任何计时器，简单理解，使用 async await 的函数或 Promise 将等待该函数或 Promise 返回适当的响应...