setTimeout in a for loop with varying time

Question

I have a array of different objects, each object contain a time property of different values.

I would like to loop for this array, inside have a setTimeout function, the time would be the time property of each object.

Therefore, the result I want is

after 10s, print the name of first object
after 20s, print the name of 2nd obj.
...
...
after 5s, print the name of last obj.

However, the below code will execute in an accumulation of total 20s, which is print obj 3 & 5 when time = 5s, after 5s, print obj 1, after 10s, print obj 2 & 4.

const data = [
{name: "Warm up", timeFormat: "00:10", time: 10},
{name: "High interval", timeFormat: "00:20", time: 20},
{name: "Low Interval", timeFormat: "00:05", time: 5},
{name: "High interval", timeFormat: "00:20", time: 20},
{name: "Low Interval", timeFormat: "00:05", time: 5},
]

function renderTimer(data) {
  for (let i = 0; i < data.length; i++) {
    const eachName = data[i].name;
    const eachTime = data[i].time;

    setTimeout(() => {
      console.log(eachName);
    }, eachTime * 1000);
  }
}

renderTimer(data);

What is the problem of my code? OR any other ways to achieve the result I want?

Thanks so much!

just to be sure, you want the timeout of the object to start after the previous object's timeout ended ? — jonatjano
– jonatjano, Commented Aug 10, 2020 at 13:59
yes, after time in obj 1 finish, execute obj 2 basing on its time — auntR
– auntR, Commented Aug 10, 2020 at 14:06

kgello · Accepted Answer · 2020-08-10 14:09:08Z

What happens, is that the program races through the for loop, and sets up the Timeouts almost immediatley relative to t=0s. If you want to use setTimeout(), you have to cumulate the timing yourself:

const data = [
{name: "Warm up", timeFormat: "00:10", time: 10},
{name: "High interval", timeFormat: "00:20", time: 20},
{name: "Low Interval", timeFormat: "00:05", time: 5},
{name: "High interval", timeFormat: "00:20", time: 20},
{name: "Low Interval", timeFormat: "00:05", time: 5},
]

function renderTimer(data) {
  var timing = 0;
  for (let i = 0; i < data.length; i++) {
    const eachName = data[i].name;
    timing += data[i].time;

    setTimeout(() => {
      console.log(eachName);
    }, timing * 1000);
  }
}

renderTimer(data);

jonatjano · Accepted Answer · 2020-08-10 14:14:21Z

you can do it using async/await and Promises

it works using the fact that await new Promise(...) stop the current function until the Promise is fulfilled

const data = [
  {name: "Warm up", timeFormat: "00:10", time: 10},
  {name: "High interval", timeFormat: "00:20", time: 20},
  {name: "Low Interval", timeFormat: "00:05", time: 5},
  {name: "High interval", timeFormat: "00:20", time: 20},
  {name: "Low Interval", timeFormat: "00:05", time: 5},
]

async function renderTimer(data) {
  for (let i = 0; i < data.length; i++) {
    const eachName = data[i].name;
    const eachTime = data[i].time;

    await new Promise(res => {
      setTimeout(() => {
        console.log(eachName);
        // resolve the promise once the log is done
        res()
      }, eachTime * 100)}
    )
    // can't arrive here until the setTimeout is finalized
  }
}

renderTimer(data);

MauriceNino · Accepted Answer · 2020-08-10 14:20:02Z

2

You could also do it in a recursive function like so:

const data = [
{name: "Warm up", timeFormat: "00:10", time: 10},
{name: "High interval", timeFormat: "00:20", time: 20},
{name: "Low Interval", timeFormat: "00:05", time: 5},
{name: "High interval", timeFormat: "00:20", time: 20},
{name: "Low Interval", timeFormat: "00:05", time: 5},
]

const renderTimer = (data, i = 0) => {
  setTimeout(() => {
    console.log(data[i].name);
    
    // Call for next data
    if(i < data.length - 1)
      renderTimer(data, i + 1);
  }, data[i].time * 1000);
}

renderTimer(data);

edited Aug 10, 2020 at 14:20

answered Aug 10, 2020 at 14:13

MauriceNino

6,8851 gold badge32 silver badges75 bronze badges

1 Comment

jonatjano Over a year ago

you could set a default value of 0 to your i

Pranav Rustagi · Accepted Answer · 2020-08-10 14:24:29Z

You can do it like this :

const data = [
{name: "Warm up", timeFormat: "00:10", time: 10},
{name: "High interval", timeFormat: "00:20", time: 20},
{name: "Low Interval", timeFormat: "00:05", time: 5},
{name: "High interval", timeFormat: "00:20", time: 20},
{name: "Low Interval", timeFormat: "00:05", time: 5},
]

var time = 0;

function renderTimer(data) {
  for (let i = 0; i < data.length; i++) {
    const eachName = data[i].name;
    time += data[i].time;
    const eachTime = time * 1000;

    setTimeout(() => {
      console.log(eachName);
    }, eachTime);
  }
}

renderTimer(data);

Collectives™ on Stack Overflow

setTimeout in a for loop with varying time

4 Answers 4

1 Comment

Comments

1 Comment

Comments

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

1 Comment

Comments

Related