I have a few hundreds of things to render in parallel in an html5 canvas. These are drawn in parallel in a Promise.all
call. Now, I would like to know which of these promise is the last to be resolved.
// 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.
})
In my case, I have multiple classes with each a render()
function. Some of these are heavier than others, but I want to know which ones.
I have something along these lines, and I would like to know which promise is the slowest to resolve, so that I can optimise it.
You could time each promise. You could even assign an identifier to each one if you want to know specifically which is resolving. The
timePromise
function below takes an id and a function that returns a promise, times that promise, and logs the result. It doesn't change the result of the promises, so you can usemyPromises
as you normally would.I'm not sure how you're creating your array of promises in your actual code, so it might not be straightforward to wrap each promise in a function that returns it. But you could likely adapt this to work with your situation.
If you aren't concerned with knowing exactly how long each takes, you could just have
timePromise
take a promise that's already started, and time from whentimePromise
is called to when it resolves. This wouldn't be as accurate, but would still give you a general idea, especially if one or a few promises are taking much longer than others.Something like this: