Run the .map() method at regular intervals of 'x' seconds

Question

Run the .map() method at regular intervals of 'x' seconds

I have a certain function in mind:

function fetchDesign (items) {
  items.map(item => item.classList.add('selected'))
  // additional code here
}

Is there a way to trigger item.classList.add('selected') every 2 seconds, while ensuring that the rest of the code runs synchronously after all iterations are completed?

(Just to clarify, 'items' is an array containing HTML elements)

UPDATE: Here's what I've attempted so far:

items.forEach(item => setTimeout(() => { item.classList.add('selected') }, 2000))
items.map(item => setTimeout(() => { item.classList.add('selected') }, 2000))

setTimeout(() => {
 items.map(item => item.classList.add('selected'))
}, 2000)
setInterval(() => {
 items.map(item => item.classList.add('selected'))
}, 2000)

My current struggle includes encountering the exact issues I set out not to face initially: addClass does not get delayed as required and all iterations happen simultaneously. Furthermore, the following lines of code run asynchronously, causing immediate display of console.log outputs.

javascript

Answer 1

Answer №1

Utilizing Promises allows for the sequential addition of classes to each DOM node, as well as executing code once all nodes have been processed.

var myArrayOfDomNodes = Array.from(document.querySelectorAll('p'));

addClassesWithDelay(myArrayOfDomNodes).then(_ => {
    // this block of code will execute after all classes have been added.
    console.log('process complete');
});

function addClassWithInterval(node) {
    return new Promise(res => {
        setTimeout(_ => {
            node.classList.add('highlighted');
            res();
        }, 2000);
    });
}

function addClassesWithDelay(sequence) {
    let item = sequence.shift();
    return item ? addClassWithInterval(item).then(addClassesWithDelay.bind(null, sequence)) : Promise.resolve();
}

p.highlighted {
  background-color: yellow;
}

<p>One</p>
<p>Two</p>
<p>Three</p>
<p>Four</p>

Answer 2

Utilizing Promises allows for the sequential addition of classes to each DOM node, as well as executing code once all nodes have been processed.

var myArrayOfDomNodes = Array.from(document.querySelectorAll('p'));

addClassesWithDelay(myArrayOfDomNodes).then(_ => {
    // this block of code will execute after all classes have been added.
    console.log('process complete');
});

function addClassWithInterval(node) {
    return new Promise(res => {
        setTimeout(_ => {
            node.classList.add('highlighted');
            res();
        }, 2000);
    });
}

function addClassesWithDelay(sequence) {
    let item = sequence.shift();
    return item ? addClassWithInterval(item).then(addClassesWithDelay.bind(null, sequence)) : Promise.resolve();
}

p.highlighted {
  background-color: yellow;
}

<p>One</p>
<p>Two</p>
<p>Three</p>
<p>Four</p>

Answer 3

Answer №2

If you need to temporarily stop the execution of your script, using setTimeout or setInterval is the way to go. However, since all setTimeout calls will run simultaneously, you'll have to either nest them or set increasing timeouts (e.g. 2s, 4s, 6s, ...). To achieve the latter, you can use the following code snippet:

`sequence.forEach((item, index) => setTimeout(() => { item.classList.add('active') }, (index + 1) * 2000))`

To ensure that the rest of the script runs after all callbacks have finished, wrap it in a final setTimeout with a delay of sequence.length * 2000 (or (sequence.length + 1) * 2000, depending on your requirements).

Answer 4

If you need to temporarily stop the execution of your script, using setTimeout or setInterval is the way to go. However, since all setTimeout calls will run simultaneously, you'll have to either nest them or set increasing timeouts (e.g. 2s, 4s, 6s, ...). To achieve the latter, you can use the following code snippet:

`sequence.forEach((item, index) => setTimeout(() => { item.classList.add('active') }, (index + 1) * 2000))`

To ensure that the rest of the script runs after all callbacks have finished, wrap it in a final setTimeout with a delay of sequence.length * 2000 (or (sequence.length + 1) * 2000, depending on your requirements).

Run the .map() method at regular intervals of 'x' seconds

Answer №1

Answer №2

Similar questions

Utilizing a Meteor Method within a Promise Handler [Halting without Throwing an Error]

Understanding the contrast between a put request subscription with an arrow versus without in Typescript

Guide on utilizing Redux's Provider in React applications

Inheritance of nested directives in Angular.js

What are the steps to install the LTS release of NodeJS if Node 10 is already installed on my system?

Guide to showcasing images dynamically within a table

Obtain a 404 rendering using EJS in an ExpressJS application

Transferring checkbox data to Bootstrap modals and dynamically summoning specific div modals using their unique identifiers

Eliminate the presence of core-js in the nextjs bundle

Building React Typescript Components with Froala Editor Plugins

What steps should I take to display a Material UI grid in React without triggering the warning about the missing unique key

Having trouble getting `sudo apt install npm` to work? You might be encountering the error message "The following packages have unmet dependencies

React components do not re-render when the context value changes

Finding the location of PIE.htc in the Firebug tool

The Click Event Is Triggering Even with Correct Callbacks Being Set

Encountering a problem while verifying pattern using regular expressions

Issue encountered with the openpgpjs example: `'The function openpgp.encrypt is not defined'`

Customizing line charts with D3.js and AngularJS for ultimate visual impact

Switching the background image of a div when hovering over a particular list item

Access to Web Share API requires permission