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

Question

我有数百个东西要在 html5 画布中并行渲染。这些在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() 函数。其中一些比其他重，但我想知道哪些。

我有一些类似的东西，我想知道哪个承诺最慢解决，以便我可以优化它。

Answer 1

这是每个承诺在解析后设置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 2

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

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 3

你可以为每个承诺计时。如果您想具体了解哪个正在解析，您甚至可以为每个标识符分配一个标识符。下面的timePromise 函数接受一个id 和一个返回promise 的函数，该promise 的时间，并记录结果。它不会改变 promise 的结果，所以你可以像往常一样使用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.
})

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

如果您不关心确切知道每个需要多长时间，您可以让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()));
}