为什么将你的代码包装在 resolved prop 中会使你的同步代码表现得像异步代码？

Question

Promise 内部的循环就像同步代码一样工作，例如：


console.log('im working')
function proLoop(){
    return Promise((resolve ,rejects)=>{
        for (let i = 0; i < 1000000000000; i++) {}
        console.log('loop is done')
    })
}

proLoop();

console.log('im working')

因此，即使我们像 promise 一样编写，它也会获得更多时间并冻结我们的代码。换句话说，它会同步工作。

我找到了一个解决方案，但为什么它有效？

所以解决方案只是扭曲你的代码，就像已解决的 promise

像这样

return new Promise.resolve().then( ()=>{
    for (let i = 0; i < 1000000000000; i++) {}
    console.log('loop is done')
})

但是为什么以及如何？？？

Answer 1

您需要了解以下几点：

Promise 不会异步 - 它们是已经异步的通知机制。 Promises 通知您已经异步操作的成功或失败。

promise构造函数的回调函数被同步调用；它被同步调用以启动一个已经异步的操作。

在您的例子中，promise 构造函数包含同步代码；这就是它阻止其他代码的原因。
将循环移动到 then 的回调函数中会异步执行循环，因为 then 的回调函数是异步调用的。

注意：then方法的回调函数虽然是异步调用的，但是一旦开始执行，回调中的同步代码执行完毕后，其他代码才会执行。

Answer 2

在这两种情况下，for 循环都会阻塞主事件循环。区别在于 for 循环何时开始。

在第一种情况下，传递给new Promise的函数立即执行。因此，它会阻止创建它的其余函数。

在第二种情况下，传递给 then() 的函数在下一次事件循环空闲时排队到运行。因此，创建它的函数首先完成，然后 for 循环运行。（如果这是目标，那么它是一种非常不直观的方法，使用 setImmediate (in browsers) or Node's process.nextTick() 会更整洁。）

如果您想将 for 循环完成的工作分流到主事件循环之外，这样它就不会阻塞任何东西，您可以使用 Web Worker or Worker thread，具体取决于 JavaScript 运行您使用的时间。

为什么将你的代码包装在 resolved prop 中会使你的同步代码表现得像异步代码？

Why wrapping your code in resolved prop makes your sync code act like async code?

javascript

loops

for-loop

promise

es6-promise