Executing a JavaScript delay within a for loop using an array

Question

Executing a JavaScript delay within a for loop using an array

Hello everyone, I need some help with a code snippet I'm working on. The code retrieves data from Google Sheets which includes addresses and amounts, then stores it in an array of arrays. I want the script to pause for 10 seconds between each iteration as it loops through the array. Here's what I have so far:

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);
    }, 10 * 1000); // Changed the timeout to 10 seconds
}

There are a total of 4 addresses and amounts that need to be processed one at a time with a 10-second interval between them. My current implementation only waits 5 seconds and then outputs all 4 address and amount pairs simultaneously.

javascript arrays for-loop delay

Answer 1

Answer №1

Instead of using setInterval, opt for setTimeout
Iterate through the array and set intervals based on the index to ensure proper execution timing for each callback (e.g., use i * 10000 instead of 5 * 1000 for delay, where i represents the current index)
Utilize Array#map over a traditional for-loop to avoid issues with the index variable losing its value once callbacks are executed

Example

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 approach is to create a recursive function that generates a new timeout each time the previous callback is executed until all elements in the array have been processed

Example

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

Answer 2

Instead of using setInterval, opt for setTimeout
Iterate through the array and set intervals based on the index to ensure proper execution timing for each callback (e.g., use i * 10000 instead of 5 * 1000 for delay, where i represents the current index)
Utilize Array#map over a traditional for-loop to avoid issues with the index variable losing its value once callbacks are executed

Example

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 approach is to create a recursive function that generates a new timeout each time the previous callback is executed until all elements in the array have been processed

Example

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

Answer 3

Answer №2

To ensure you obtain the index of an array, it is essential to utilize a standard for loop rather than using the of iteration:

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 function will execute every five seconds; feel free to adjust the time interval by modifying the value from 5000 to your preference.

Answer 4

To ensure you obtain the index of an array, it is essential to utilize a standard for loop rather than using the of iteration:

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 function will execute every five seconds; feel free to adjust the time interval by modifying the value from 5000 to your preference.

Executing a JavaScript delay within a for loop using an array

Answer №1

Answer №2

Similar questions

Combining two objects in Typescript using the spread operator and creating a reusable type

What is the best way to retrieve a comprehensive outcome from a sql search utilizing php and consequently showcase it using javascript?

issue with customized select dropdown within a bootstrap modal window

It is not possible to alter the req.ip in the Express framework

The jQuery load() method may not load all elements

Transformation of HTML occurs in React components upon saving in Visual Studio Code

Click on the hyperlinks one by one that trigger ajax events

What is the best way to retrieve a user's country name using C#?

Updating values of objects during iterations and for get requests is ineffective

Comparing event.target with a selector can be easily done by utilizing Javascript methods

Conditionally remove elements from an array with multiple dimensions

JavaScript function having an undefined value caused by a radio button

Tips for producing/reserving cropped images from a photo? (includes converting images to base64 format)

Tips for discovering the smallest value within an array by utilizing the ternary operator in Swift

Every time ComponentDidMount is triggered, my component state automatically switches to "loading" in enzyme, which is not the behavior I

Tips for submitting a form and retrieving session count without the need to refresh the page after submitting the form

Does a Function Component become an object instance of itself when rendered with a tag?

Pros and Cons of Using HTML5 Mode versus Hash Mode in AngularJS

Retrieve the JSON file only upon the first input change

Issue accessing string array passed as prop with numerical index in ReactJS and Typescript