setTimeout in foreach elements not working

Question

I want translate the all elements in my slider but want each element translate with a delay,i have this idea , this is my code :

 this.button_right.addEventListener( "click", function( e ) {

  e.preventDefault();
  self.items.forEach(function (element,index) {

   setTimeout(function(){
  element.style.transform = 'translate(-150px, 0)';
  },1000);

});

});

any body have better idea?

I've seen this question enough to know there is a duplicate somewhere. — Spencer Wieczorek, Jun 29 '16 at 17:12

Rayon · Accepted Answer · 2016-06-29T17:16:56.470

2

Multiply delay with index

this.button_right.addEventListener("click", function(e) {
  e.preventDefault();
  self.items.forEach(function(element, index) {
    setTimeout(function() {
      element.style.transform = 'translate(-150px, 0)';
    }, (1000 * (index + 1)));
  });
});

edited Jun 29 '16 at 17:16

answered Jun 29 '16 at 17:11

Rayon

36,219
4
49
76

@rayon : Any specific reason of increasing the delay here ? – Nikhil Maheshwari Jun 29 '16 at 17:20
@NikhilMaheshwari, All the statements in `setTimeout` will get executed once..with the delay of `1000`..they are queued.. – Rayon Jun 29 '16 at 17:22
@NikhilMaheshwari, Without delay: https://jsfiddle.net/rayon_1990/4ywset95/ And with delay: https://jsfiddle.net/rayon_1990/4ywset95/1/ – Rayon Jun 29 '16 at 17:30

setTimeout in foreach elements not working

1 Answers1