I have an async function that gets called that loops over an array an calls a function for each item.
In this example, the function is hitting an API endpoint and I need to wait for one item to finish before moving onto the next.
However, what currently happens is that each function gets called at roughly the same time, which is causing issues in the api response. So i need to wait 1 second between each request.
This is what I currently have
const delayedLoop = async () => {
const delay = (ms) => new Promise((resolve) => setTimeout(resolve, ms));
const myAsyncFunc = async (i) => {
console.log(`item ${i}`);
await delay(0);
return true;
};
const arr = ['one', 'two', 'three'];
const promises = arr.map(
(_, i) =>
new Promise((resolve) =>
setTimeout(async () => {
await myAsyncFunc(i);
resolve(true);
}, 1000),
),
);
return Promise.all(promises);
}
const myFunc = async () => {
console.log('START');
await delayedLoop();
console.log('FINISH');
}
myFunc();
What happens is;
STARTitem ${i} together (without delay in between)FINISHWhat I want to happen is
STARTitem 1item 2item 3FINISHSee JSFiddle to see it in action
You can do, it like this, using a simple for-loop:
const delayedLoop = async () => {
const delay = (ms) => new Promise((resolve) => setTimeout(resolve, ms));
const myAsyncFunc = async (i) => {
console.log(`item ${i}`);
return true;
};
const arr = ['one', 'two', 'three'];
for(let i=0; i < arr.length; i++) {
await myAsyncFunc(i);
await delay(1000);
}
}
const myFunc = async () => {
console.log('START');
await delayedLoop();
console.log('FINISH');
}
myFunc();