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

User controls in ASP.NET may not trigger the jQuery (document).ready() function

Sending postMessage during the beforeunload event does not work as expected

Parsing JSON into a List of Objects

Unable to transfer data successfully from popup to extension.js

What are some techniques for breaking down or streamlining typescript code structures?

conceal specific language options within the dropdown selection box

What is the best way to deactivate unclicked href links within a loop?

Encountering error TS2307 while using gulp-typescript with requirejs and configuring multiple path aliases and packages

Bot in discord.js refuses to exit voice channel

Creating a video that plays frame-by-frame on an HTML5 canvas and can be controlled with a slider

Utilizing the Vuex/Redux store pattern to efficiently share a centralized source of data between parent and child components, allowing for customizable variations of the data as

Sharing models between AngularJS controllers

Showing C# File Content in JavaScript - A Step-by-Step Guide

What steps should I follow to ensure that the processData function waits for the data returned by the getData function in Angular?

Is it possible to call a REST API in Javascript by passing the username and password as

How to remove the black border on a material-ui button

arrange items based on their category into arrays

Jquery function for determining height across multiple browsers

Determining the type of <this> in an Object extension method using TypeScript

Clear session data when logging out from a dropdown list