I want to kick off an async task but then have another function run that shows some animation.

I can't do

const myFunc = async () => {
 // await asyncFunc()
 // await animateFunc()
}

as it won't get to animateFunc until asyncFunc has resolved

I'm not sure I can wait on promises to resolve iether as animateFunc is a continuous cyclical for loop that I run

I also want to try and avoid state with useEffect as that feels more like an anti pattern. I would like to call them both onClick and then break from the for loop once the async one resolves. what are my options here?

I want to kick off an async task but then have another function run that shows some animation.

I can't do

const myFunc = async () => {
 // await asyncFunc()
 // await animateFunc()
}

as it won't get to animateFunc until asyncFunc has resolved

I'm not sure I can wait on promises to resolve iether as animateFunc is a continuous cyclical for loop that I run

I also want to try and avoid state with useEffect as that feels more like an anti pattern. I would like to call them both onClick and then break from the for loop once the async one resolves. what are my options here?

• javascript
• reactjs
• asynchronous
• async-await
• promise

Share Improve this question Follow edited Jan 10 at 16:39 Borewit 95511 silver badge2020 bronze badges asked Nov 19, 2024 at 10:58 Red BaronRed Baron 7,7011212 gold badges4747 silver badges112112 bronze badges 8

• 2 developer.mozilla./en-US/docs/Web/JavaScript/Reference/… – mousetail Commented Nov 19, 2024 at 11:00
• didn't realise each promise in promise.all could be done like that, should have read docs more. thanks! – Red Baron Commented Nov 19, 2024 at 11:07
• although i'm not sure the promise is resolving now – Red Baron Commented Nov 19, 2024 at 11:16
• 1 I'm not sure what you mean. Maybe post a new question with a minimal example of a continuous for loop and promises that explains exactly what you want and what you have and the difference between them – mousetail Commented Nov 19, 2024 at 11:45
• 1 At the risk of stating the obvious, if you don't want to wait for a function to complete you can also just not await – Evert Commented Nov 19, 2024 at 17:05

 |  Show 3 more comments

1 Answer 1

Sorted by: Reset to default 1

Execute both asyncFunc() and animateFunc() in parallel:

const doBothAtOnce = () => {
  return Promise.all([asyncFunc(), animateFunc()]);
};
await doBothAtOnce();

Demo:

function sleep(ms) {
    return new Promise(resolve => setTimeout(resolve, ms));
}

async function asyncFunc(id) {
    for (let n = 0; n < 4; ++n) {
        console.log(`Function ${id}, iteration ${n}`);
        await sleep(5);
    }
}

const runBoth = () => Promise.all([asyncFunc(1), asyncFunc(2)]);
runBoth().then(() => {
    console.log('Completed');
});