Using setTimeout within a ForEach loop does not adhere to the specified milliseconds for waiting

Question

Using setTimeout within a ForEach loop does not adhere to the specified milliseconds for waiting

Although ForEach console.log's very fast, I am looking to introduce a delay of 8 seconds before logging the next item in Set. I experimented with setTimeout but it doesn't appear to output at the precise milliseconds specified.

const completedIds = [];

//Dom mutation observer
const observeChat = new MutationObserver(function(mutationsList) {
  for (let mutation of mutationsList) {
    if (mutation.addedNodes.length) {


      for (i = 0; i < mutation.addedNodes.length; i++) {
mutation.addedNodes[i].firstChild.naturalWidth < 51 ? pm(mutation.addedNodes[i].firstChild.src.slice(-48, -12)) : false
      }
      
    }
  }
});
observeChat.observe(document.querySelector('.accounts-container__list'), {attributes: true, childList: true, subtree: false});

// Pm function
pm = ids => {
  observeChat.disconnect();
  if (!completedIds.includes(ids)) {
    const img = new Set().add(ids).forEach(function(id, index) {
      setTimeout(function() { // This is not functioning as expected. It does NOT log in the console every 8 seconds
        console.log(id)
      }, index * 8000)
    })
  }
  observeChat.observe(document.querySelector('.accounts-container__list'), {attributes: true, childList: true, subtree: false});
}

javascript loops time foreach delay

Answer 1

Answer №1

Here are a few issues to address.

When creating a Set, remember that the entries do not spread out automatically. Adding an array to a set results in just that array being stored. It seems like you intended to spread it out instead.
The values in a set serve as its indexes, unlike the index provided by the forEach method for arrays. Multiplying the ID you added by 8000 may lead to unexpected results.
The variable img will always be undefined since the return value of Set.prototype.forEach is undefined.

If your goal is to obtain unique values using Set, consider the following steps:

Create the set using new Set(...ids),
Convert it back to an array before using forEach,
Find another way to initialize the variable img. Its intended purpose is unclear at this point...

You can implement the suggested changes in the code snippet below:

    [...new Set(ids)].forEach(function(id, index) {
//  ^^^^−−−−−−−^^^^^^−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−− here
        setTimeout(function() {
            console.log(id);
        }, index * 8000);
    });

See the live example above for reference.

In addition, you have the option to use a for-of loop with a counter:

let index = 0;
for (const id of [...new Set(ids)]) {
    setTimeout(function() {
        console.log(id);
    }, index++ * 8000);
}

Refer to the second live example for demonstration purposes.

Answer 2

Here are a few issues to address.

When creating a Set, remember that the entries do not spread out automatically. Adding an array to a set results in just that array being stored. It seems like you intended to spread it out instead.
The values in a set serve as its indexes, unlike the index provided by the forEach method for arrays. Multiplying the ID you added by 8000 may lead to unexpected results.
The variable img will always be undefined since the return value of Set.prototype.forEach is undefined.

If your goal is to obtain unique values using Set, consider the following steps:

Create the set using new Set(...ids),
Convert it back to an array before using forEach,
Find another way to initialize the variable img. Its intended purpose is unclear at this point...

You can implement the suggested changes in the code snippet below:

    [...new Set(ids)].forEach(function(id, index) {
//  ^^^^−−−−−−−^^^^^^−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−− here
        setTimeout(function() {
            console.log(id);
        }, index * 8000);
    });

See the live example above for reference.

In addition, you have the option to use a for-of loop with a counter:

let index = 0;
for (const id of [...new Set(ids)]) {
    setTimeout(function() {
        console.log(id);
    }, index++ * 8000);
}

Refer to the second live example for demonstration purposes.

Using setTimeout within a ForEach loop does not adhere to the specified milliseconds for waiting

Answer №1

Similar questions

What steps do I need to follow in order to incorporate and utilize an npm package within my Astro component

What are the steps to enable a Vue component to handle its own transitions?

Tips for dividing an array based on a defined regex pattern in JavaScript

The lack of definition for the props value poses an issue in React.js Hooks

Error in VueJS when attempting to call a method within a v-for loop: 'not defined on the instance but referenced during render'

Incorporating JavaScript/jQuery values into C# backend with ASP.NET

Prevent the <a> tag href attribute from functioning with jQuery

Reveal each element individually upon clicking the button

The unexpected token "[ ]" was encountered while assigning a numerical value to an array

How can I refresh the information without appending it to the existing table using JavaScript and jQuery?

Trying to add a single value to a specific index in a JavaScript array, but it is mistakenly assigning multiple values at once

Choosing an ID along with a numerical value in jQuery

Is there a more efficient method for configuring mongo?

A sophisticated approach to implementing a search functionality within a complex JSON structure containing nested arrays using JavaScript

Ext JS - A grid cell containing varying values, accompanied by a selection of combo boxes

Transmit an HTML table to PHP

Modify the CSS using JavaScript after a brief delay

Issue with passing multiple promises to $q.all function

What is the process of converting the string 'dd/mm/yy hh:MM:ss' into a Date format using javascript?

Using AJAX and PHP to dynamically fill HTML drop-down menus