Promise.all 获得最慢的解决承诺

Question

我有几百个东西要在 html5 canvas 中并行渲染。这些是在 Promise.all 调用中并行绘制的。现在，我想知道这些承诺中的哪一个是最后要解决的。


// get a promise that will resolve in between 0 and 5 seconds.
function resolveAfterSomeTime(): Promise<void> {
    return new Promise((resolve) => setTimeout(resolve, Math.random() * 5000));
}

const myPromises = [];
for (let i = 0; i < 100; i++) {
    myPromises.push(resolveAfterSomeTime);
}

Promise.all(myPromises).then(() => {
    // find out which promise was the last to resolve.
})

在我的例子中，我有多个类，每个都有一个 render() 函数。其中一些比其他的重，但我想知道哪些。

我有类似的想法，我想知道哪个 promise 解决起来最慢，以便我可以对其进行优化。

Answer 1

我能想到的最好方法是使用一个计数器来指示到目前为止已解决的承诺数：

function resolveAfterSomeTime() {
  return new Promise((resolve) => setTimeout(resolve, Math.random() * 5000));
}

const myPromises = [];
let resolveCount = 0;
for (let i = 0; i < 100; i++) {
  myPromises.push(
    resolveAfterSomeTime()
      .then(() => {
        resolveCount++;
        if (resolveCount === 100) {
          console.log('all resolved');
          console.log('array item', i, 'took longest');
        }
      })
  );
}

Answer 2

这里有一种方法，每个 promise 在解析后设置 lastPromiseToResolve 的值。解决的最后承诺将把它设置为最后。


// get a promise that will resolve in between 0 and 5 seconds.
function resolveAfterSomeTime(): Promise<void> {
    return new Promise((resolve) => setTimeout(resolve, Math.random() * 5000));
}

let lastPromiseToResolve = null
const myPromises = [];
for (let i = 0; i < 100; i++) {
    const promise = resolveAfterSomeTime()
    myPromises.push(promise.then(() => {
        lastPromiseToResolve = promise // all the promises will set lastPromiseToResolve
    }));
}

Promise.all(myPromises).then(() => {
  console.log(lastPromiseToResolve) // this would be the last promise to resolve
})

Answer 3

您可以为每个承诺计时。如果您想具体了解哪个正在解析，您甚至可以为每个分配一个标识符。下面的 timePromise 函数采用一个 id 和一个 returns 承诺的函数，乘以该承诺，并记录结果。它不会改变承诺的结果，因此您可以像往常一样使用 myPromises。

function resolveAfterSomeTime() {
    return new Promise((resolve) => setTimeout(resolve, Math.random() * 1000));
}

// f is a function that returns a promise
function timePromise(id, f) {
  const start = Date.now()
  
  return f()
    .then(x => {
      const stop = Date.now()
      
      console.log({id, start, stop, duration: (stop - start)})
      return x
    })
}

const myPromises = [];
for (let i = 0; i < 100; i++) {
    myPromises.push(timePromise(i, resolveAfterSomeTime));
}

Promise.all(myPromises).then(() => {
    // find out which promise was the last to resolve.
})

我不确定您是如何在实际代码中创建承诺数组的，因此将每个承诺包装在 returns 它的函数中可能并不简单。但是您可能会根据自己的情况调整它。

如果您不关心确切地知道每个需要多长时间，您可以让 timePromise 接受一个已经开始的承诺，以及从 timePromise 被调用到它解决的时间.这不会那么准确，但仍然会给你一个大概的想法，尤其是当一个或几个承诺比其他承诺花费的时间长得多时。

像这样：

function timePromise(id, p) {
  const start = Date.now()
  
  return p
    .then(x => {
      const stop = Date.now()
      
      console.log({id, start, stop, duration: (stop - start)})
      return x
    })
}

const myPromises = [];
for (let i = 0; i < 100; i++) {
    myPromises.push(timePromise(i, resolveAfterSomeTime()));
}

Promise.all 获得最慢的解决承诺

Promise.all get slowest resolving promises

javascript

promise

typescript

promise.all