Add delay between each item in an array when looping over array

Question

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;

LogsSTART
waits 1 second
Logs all item ${i} together (without delay in between)
Immediately logs FINISH

What I want to happen is

LogsSTART
waits 1 second
Logs item 1
waits 1 second
Logs item 2
waits 1 second
Logs item 3
Immediately logs FINISH

See JSFiddle to see it in action

await delay(0); seems to be the problem. I think it should be await delay(1000); — Emil Karlsson
– Emil Karlsson, Commented Jul 19, 2022 at 12:41
That just extends the time between the last item ${i} log and the FINISH log, see here jsfiddle.net/a4pu6s7q — mcclosa
– mcclosa, Commented Jul 19, 2022 at 12:42
Just to emulate the api call, as it's an async function that performs some logic — mcclosa
– mcclosa, Commented Jul 19, 2022 at 12:44
@EmilKarlsson No, delay(0) is not the problem. The problem is arr.map() which creates and starts all promises at the same time ... — derpirscher
– derpirscher, Commented Jul 19, 2022 at 12:44

Charchit Kapoor · Accepted Answer · 2022-07-19 12:43:48Z

4

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();

answered Jul 19, 2022 at 12:43

Charchit Kapoor

9,3242 gold badges11 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

mcclosa Over a year ago

Thanks, this works perfectly! I didn't relalise, as mentioned in another comment, that arr.map starts all promises at the same time and using a for loop is the preferred method for this!

Keith Over a year ago

@mcclosa arr.map doesn't start any promises, you do ->new Promise(, all map does is map, there is no wait logic built in. There are map versions you can use that are promise aware, bluebirds map is one, but even better is has a concurrency option, and that can come in very handy.. Or even this -> npmjs.com/package/promise.map

Collectives™ on Stack Overflow

Add delay between each item in an array when looping over array

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related