Delay between each iteration of foreach loop?

Question

so I am making a simon says game. This function displays the current sequence. The problem with it right now is that it doesn't really go in a nice sequence, it kind of does everything at once. Say the colors are "blue", "red", and "yellow, they will all go off at the same time rather than in sequence. How can I fix this?

var displaySequence = function(){
    compSequence.forEach(function(color){
        $("#" + color).fadeTo(300, 0.5).fadeTo(300, 1.0);
    })
}

You can use setTimeout() to stagger the display of each color in the sequence. — timolawl
– timolawl, Commented Apr 19, 2016 at 1:28

Karl Galvez · Accepted Answer · 2017-12-30 21:23:55Z

28

A none jQuery solution. You will need to use the array index to give the illusion of waiting between each call, however each function has ran already. What will happen is: show color 1 in 1 second, show color 2 in 2 seconds...

var displaySequence = function(){
    compSequence.forEach(function(color, index){
        setTimeout(function(){
            $("#" + color).fadeTo(300, 0.5).fadeTo(300, 1.0);
        },
        1000 * index);
    })
}

adjust the 1000 * index to change the delay.

edited Dec 30, 2017 at 21:23

answered Apr 19, 2016 at 1:50

Karl Galvez

8436 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Rajshekar Reddy Over a year ago

So you say this is non Jquery solution??

Karl Galvez Over a year ago

No more jQuery solution :)

Saad Benbouzid Over a year ago

this isn't supposed to work smh : scottiestech.info/2014/07/01/…

Oli Soproni B. · Accepted Answer · 2016-04-19 01:31:53Z

1

I make use of the jQuery delay function

Here is a the javascript.

$(document).ready(function(){

  var compSequence = new Array("red", "blue", "yellow");

  var displaySequence = function() {

      $.each(compSequence, function (i, color) {
        // add delay
        $("#" + color).delay(i * 1000).fadeTo(300, 0).fadeTo(300, 1.0);
      });      
  }

  displaySequence();

});

Here is a DEMO

answered Apr 19, 2016 at 1:31

Oli Soproni B.

2,8103 gold badges24 silver badges47 bronze badges

2 Comments

Scriptomaniac Over a year ago

This works really well but once a duplicate color is added, it is delayed by a huge amount.

Oli Soproni B. Over a year ago

@Scriptomaniac, yes, since i = starts 0 to end of the array length, and the delay is multiplied by 1000 milisecs(1sec), to reduce the delay then you can adjust the multiplier value

Collectives™ on Stack Overflow

Delay between each iteration of foreach loop?

2 Answers 2

3 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related