Loop through an array in React with pause in between the iterations

Question

I have a function that handles sending requests when a button is clicked, however the requests just get "blasted" and I want them to be a bit spaced out in time, say 500ms apart.

Here is what I have tried:

async function SendRequests() {
  requestsToSend.forEach(async (request) => { 
    request.Send();
    
    await new Promise((resolve) => setTimeout(resolve, 500));
  });
}

But it doesn't work the requests still get blasted. I have seen this approach in another answer to a similar question, and I have also used it in my own code on the NodeJS side and it works there, but I can't get it to work on the React side.

I have also tried this:

function SendRequests() {
  requestsToSend.forEach((request) => { 
    setTimeout(()=> { request.Send(); }, 500)
  });
}

And it kinda works, but they still get blasted. What I am guessing is happening here is that, all of the setTimeouts get queued and they just count out at the same time.

thedude · Accepted Answer · 2020-08-02 11:54:48Z

1

You can schedule the timeouts based on the request index:

function SendRequests() {
  requestsToSend.forEach((request, index) => { 
    setTimeout(()=> { request.Send(); }, 500 * (index + 1))
  });
}

answered Aug 2, 2020 at 11:54

thedude

9,8371 gold badge34 silver badges33 bronze badges

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

Comments

Bob van 't Padje · Accepted Answer · 2020-08-02 11:59:09Z

0

The first question I would have i why would you not want to send all requests at the same time? If you do this to make sure you don't have any race conditions i'm not sure if this is the correct way of handling it.

However, you could solve this problem by settings an interval instead of a timeout.

let count = 0;
setInterval(() => { list[count].send(); count++ }, 500);

answered Aug 2, 2020 at 11:59

Bob van 't Padje

7341 gold badge6 silver badges19 bronze badges

3 Comments

Darkbound Over a year ago

Because the requests are being sent to a device and I am not sure if it can handle a blast of requests, so I prefer to play it safe, as waiting 2 seconds is not a problem.

Darkbound Over a year ago

Also wasnt setInterval for executing a piece of code every X seconds? I don't want that.

Bob van 't Padje Over a year ago

Ahh I forgot about that. You would have to manually check when to cancel the interval. I think thedudes example would work better for your usecase

Collectives™ on Stack Overflow

Loop through an array in React with pause in between the iterations

2 Answers 2

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related