JavaScript: Add a delay to each node created

user1400803 Published at Dev

user1400803

Trying to learn JavaScript and this is my first 'real' project.

I am trying to add a delay to each .slice element that is created once the menu button is clicked. The while loop clones and appends and then the for loop changes the opacity to visible on each slice.

I'm trying to figure out how to add a different delay to each slice node so they appear one after each other instead of all at once.

Do I use forEach after the while loop? Any advice would be great.

JSFiddle: http://jsfiddle.net/5d2Gc/

JS:

(function () { 'use strict';

var m = document.getElementById('btn-nav');
var a = document.getElementById('main-nav');
var b = a.getElementsByClassName('background')[0];
var s = a.getElementsByClassName('slice');

m.addEventListener('click', function() {

  m.classList.add('open');

  var c = document.getElementsByClassName('slice')[0];
  var sWidth = c.clientWidth;

  while(sWidth < a.clientWidth*(a.clientHeight / c.clientHeight)) {

         var d = c.cloneNode(true);

         c.parentNode.appendChild(d);

         sWidth = sWidth + d.clientWidth; 
    }

    for(var i = 0; i < s.length; i++){
             s[i].style.opacity = 1;
           } 

}, false);

}());

HTML

          <div class="slice"></div>
                  </div>

Parag Gangil

See this JsFiddle

Instead of :

for(var i = 0; i < s.length; i++){
    s[i].style.opacity = 1;
}

Use this :

for (var i=0;i<s.length;i++) {
   (function(ind) {
        setTimeout(function(){s[ind].style.opacity = 1;}, 1000 + (1000 * ind));
   })(i);
}

I have set timeout with every iteration.

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at2021-02-10

Comments

0 comments

From Dev

add a short delay between each iteration of do while loop

From Dev

Javascript: for vs jQuery.each() with time delay

From Dev

How to add fields to each new document created in CouchDB

From Dev

Add delay using .each when adding class

From Dev

Is a node.js module instance created for each require?

From Dev

How can I add a delay inside each iteration of an _.each loop in underscore.js?

From Dev

Add delay on each loop iteration

From Dev

Add a value to each element in javascript

From Dev

Add delay of 5 seconds in JavaScript code befor clicking next button

From Dev

Delay each loop iteration in node js, async

From Dev

How to add a delay in async.js iterator (Node)

From Dev

Add custom id to each path created using freedrawing

From Dev

Add attribute to each xml node xslt

From Dev

How to add delay to show a div with Javascript?

From Dev

add a short delay between each iteration of do while loop

From Dev

xml / javascript - Node not created

From Dev

Add delay using .each when adding class

From Dev

How can I Add a number to each div id created?

From Dev

How can I add a delay inside each iteration of an _.each loop in underscore.js?

From Dev

Javascript add delay to animate

From Dev

How to add a delay between each request in Tweepy StreamListener?

From Dev

Add delay of 5 seconds in JavaScript code befor clicking next button

From Dev

How to add attribute to a XML node created using Import node

From Dev

Delay in javascript

From Dev

Add delay to on('data') execution in Node.js

From Dev

How to add a line break after each dynamically created checkbox?

From Dev

Need to add time delay between .each elements

From Dev

How can i add 1 second delay for JavaScript loop?

From Dev

How to add a delay between shots in javascript

Related Related

Article