CODEWITHSUNDEEP
javascriptreactjs
mcclosa
mcclosa

Reputation: 1455

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

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;

What I want to happen is

See JSFiddle to see it in action

Upvotes: 1

Views: 794

Answers (1)

Charchit Kapoor
Charchit Kapoor

Reputation: 9284

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

Upvotes: 4

Related Questions