Javascript delay inside a for loop with a array

Question

Hey guys im stumped i have this piece of code. Which get some data from google sheets and puts it into an array. To be more specific it getting an address and amount. Its than makes an array of little arrays inside the array. Then im getting the array and looping through it i but i want it to pause for 10 seconds before the next array. This is what i have:

                const randomArray = [];
                for (var i = 0; i < rows.length; ++i) {
                    let row = rows[i];
                    randomArray.push(row);
                }
     for (const data of randomArray) {
                    setTimeout(() => {
                        const AddressID = data[0];
                        const Amount = parseFloat(data[1]);
                        console.log(AddressID, Amount);
                    }, 5 * 1000);
                }
            }

There is a total of 4 address and 4 amounts. I need it to do (address, amount) stop 10 seconds and do it again till it gets to the last one. What I have done waits 5 seconds and then just spits out all 4 address's and amounts all in one go.

https://coderwall.com/p/_ppzrw/be-careful-with-settimeout-in-loops — bugs, Apr 07 '18 at 22:26
Possible duplicate of [How do I add a delay in a JavaScript loop?](https://stackoverflow.com/questions/3583724/how-do-i-add-a-delay-in-a-javascript-loop) — Darkrum, Apr 07 '18 at 22:27

Kristianmitk · Answer 1 · 2018-04-07T23:09:28.153

Use setTimeout instead of setInterval
Loop over the array and depending on the index set a proper interval to wait for the execution of the callback (i.e i * 10000 instead of 5 * 1000 for the delay, where i is the current index in the array)
use Array#map instead a normal for-loop as when the callbacks get executed the looping will be finished and the index variable won't hold a proper value

Demo

let randomArray = [[1,10], [2,20], [3,30], [4,40]];

randomArray.map((el,i) => {
  setTimeout(() => {
    const AddressID = el[0];
    const Amount = parseFloat(el[1]);
    console.log(AddressID, Amount);
  }, i * 10000);
});

Another way would be to use a recursive function that creates a new timeout every time the callback of the previous was executed until you looped over the array

Demo

let randomArray = [[1,10], [2,20], [3,30], [4,40]],
    i = 0;
    
(function loop() {
  setTimeout(() => {
    const AddressID = randomArray[i][0];
    const Amount = parseFloat(randomArray[i][1]);
    console.log(AddressID, Amount);
    i++;
    if(i < randomArray.length)
      loop();
  }, i * 10000);
})();

Hey man thanks for response i had put in the wrong code snippit i changed it now. I wanted to tell you i cant have let rows because some of the sheets docs have 100+ address's and amounts. This is just a test one. — Ismar Perez, Apr 07 '18 at 22:43

score -1 · Answer 2 · answered Apr 07 '18 at 22:29

The key is to use a normal for loop instead of you're of for loop so that you can get the index of the array:

const randomArray = [];
  for (var i = 0; i < rows.length; ++i) {
    let row = rows[i];
    randomArray.push(row);
  }
 for (var j = 0; j < randomArray.length; j++) {
        var data = [randomArray[j]];
    setTimeOut(() => { console.log("Delay")}, j * 5000);
    const AddressID = data[0];
    const Amount = parseFloat(data[1]);
    console.log(AddressID, Amount);
    }

This should fire every five seconds, just change 5000 to whatever you like.

Javascript delay inside a for loop with a array

2 Answers2