Javascript承诺执行时间问题

Question

我刚开始使用 JS 承诺概念，我无法理解为什么在这个例子中两个单独的承诺实际上是“依赖”的（也就是说，为什么如果只声明了“var promise”，执行时间是 2.5 秒，但是当“var promise”和“var promise2”都声明时，两者的执行延迟都是10s）。

如果两者都声明了，并且只执行了 Promise，我预计它会在 2.5 秒内运行。然而，一旦两者都被声明，console.log 输出会以相同的、更长的延迟出现。这是为什么？如果我添加 Promise.all，我希望console.log 输出在 2.5 秒出现，Promise.all 在 10 秒出现，但两者同时出现。

function runSlow(delay) {
  const start = Date.now();
  while (Date.now() - start < delay) { } // force a loop to wait 5 seconds is 5000
  return true;
}

$(document).ready(function () {

    var promise = new Promise(function(resolve, reject) {
      // do a thing, possibly async, then…

        var it=runSlow(2500); 
        

      if (it) {
        resolve("Stuff worked!");
      }
      else {
        reject(Error("It broke"));
      }
    });


    var promise2 = new Promise(function(resolve, reject) {
      // do a thing, possibly async, then…

        var it=runSlow(10000);
        
      if (it) {
        resolve("Stuff worked too!");
      }
      else {
        reject(Error("It broke too"));
      }
    });


    promise.then(function(result) {
      console.log(result); // "Stuff worked!"
    }, function(err) {
      console.log(err); // Error: "It broke"
    });



    /*
    Promise.all([promise, promise2]).then(values => { 
      console.log(values);   
    });
    */



});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Answer 1

首先，您需要了解runSlow 函数中的while 循环会阻塞线程。这意味着在您调用 runSlow(2500) 的 Promise 中，代码在继续之前被阻塞（等待）2.5 秒。因此，无论您如何编写代码，它始终会花费您指定的最长的runSlow() 函数。代码基本上没有异步。如果您在代码中尝试以下操作，您会看到这一点：

// your code above

promise.then(val => console.log("I am done, 2.5 secs later", val))

console.log("I should show up immediately")

您会注意到console.log("I should show up immediately") 并没有立即出现，而是延迟了 2.5 秒。

异步延迟函数的“正确”方法是使用以下代码：

function runSlowAsync(delay) {
  return new Promise(resolve => {
    setTimeout(resolve, delay, true)
  })
}

runSlowAsync 函数上方返回一个 Promise，它在解析后将具有值 true。下面是带有异步 runSlow 函数的代码：

var promise = new Promise(async function(resolve, reject) {
  // do a thing, possibly async, then…

  var it = await runSlowAsync(2500); 

  if (it) {
    resolve("Stuff worked!");
  }
  else {
    reject(Error("It broke")) 
  }
});

var promise2 = new Promise(async function(resolve, reject) {
  // do a thing, possibly async, then…

  var it = await runSlowAsync(10000);
        
  if (it) {
    resolve("Stuff worked too!");
  }
  else {
    reject(Error("It broke too"));
  }
});

现在，promise 是如何解决的？

如果我们继续上面的代码，当你使用promise.then(() => { //Do something }) 时，你是在告诉运行时，好的，一旦这个承诺得到解决，then 做点什么。然后每个承诺将独立执行。如果你使用Promise.all([promise, promise1]).then()，你是在告诉运行时等到所有的promise都被解决，然后then做某事。因此，在这种情况下，只有当运行时间最长的一个已解决时，您的承诺才会得到解决。代码如下：

promise.then(() => console.log("I am done 2.5 secs later"))
promise1.then(() => console.log("I am done 5 secs later"))

Promise.all([promise, promise1]).then(() => console.log("All promises resolved"))

// In your console you will see this.

// after 2.5 seconds
// "I am done 2.5 secs later"
// another 2.5 seconds later (after 5 seconds)
// "I am done 5 secs later"
// "All promises resolved"

Answer 2

查看 cmets，然后运行 ​​sn-p

function runSlow(delay) {
  // you were using while, that will block JS and lead to wrong result
  // this wont go wrong so no reject, but real world logic might
  return new Promise(resolve => setTimeout(() => resolve("Stuff worked!"), delay))
}

// an async method that costs 2.5 sec
runSlow(2500).then(() => console.log(`2.5s later [2500]`))

// no doubt 10 sec
runSlow(10000).then(() => console.log(`10s later [10000]`))

// wait all things done
Promise.all([runSlow(2500), runSlow(10000)]).then(() => console.log(`10s later [all(2500,10000)]`))

// wait single done
Promise.race([runSlow(2500), runSlow(10000)]).then(() => console.log(`2.5s later [race(2500,10000)]`))

Answer 3

Promise 构造函数同步运行。

所以你做的是真的

blockThreadFor5s();
scheduleMicroTask();

blockThreadFor5s();
scheduleMicroTask();

Promise 反应将在下一个微任务检查点上执行，这只会在所有同步代码都执行后发生，即在 blockThreadFor5s 之后。