setTimeOut in while loop

Question

My objective is to create a simon game, and I am currently trying to change the color of each div as follows:

I am storing div classes randomly from 0 to 3; each iteration of the game adds a number to the array

var save =[];

I want to highlight the div purple at one second, at two seconds, bring it back to the assigned css color and repeat this until it iterates through all the save array class numbers.

at first i tried to do this:

setTimeout(function(){ $("."+save[0]).css("background-color", "purple"); },1000)

setTimeout(function(){ $("."+save[0]).css("background-color", ""); },2000)

setTimeout(function(){ $("."+save[1]).css("background-color", "purple"); },3000)

setTimeout(function(){ $("."+save[1]).css("background-color", ""); },4000)

and so on and so forth, as i add more iterations to the simon game.

I want to do this instead :

 var i = 0;
  function hello() {
      $("." + save[i]).css("background-color", "purple");
  }

  function goodbye() {
      $("." + save[i]).css("background-color", "");
  }

  var one = 1000;
  var two = 2000;


  while (i < save.length) {
      setTimeout(hello(), one);
      setTimeout(goodbye(), two);

      i++;

      one += 2000;
      two += 2000
  }

i went through several stack overflow questions, found similar ones, but nothing that helped. I can imagine there's youtube videos on creating this game, but I would like to figure out as much as I could on my own, it's just this one thing that has me scratching my head.

You cannot pass a function with parameters to setTimeout. Wrap it into an anonymous function. — Anonymous
– Anonymous, Commented Feb 13, 2018 at 6:18
please review an answer and let me know is it working for your or not? — Dipak
– Dipak, Commented Feb 13, 2018 at 6:34
I eliminated the parameters. Also I attempted to wrap it into a function. Still no luck — George Salamanca
– George Salamanca, Commented Feb 14, 2018 at 3:26

Dipak · Accepted Answer · 2018-02-14 04:30:17Z

1

Based on your code and requirement understanding I tried to solve your issue.

$(document).ready(function() {
  var changeColor = setInterval(function() {
    var hasClassPurple = $(".wrapper").hasClass("purple");
    if (true === hasClassPurple) {      $(".wrapper").removeClass("purple").addClass("white");
    } else {      $(".wrapper").removeClass("white").addClass("purple");
    }
  }, 1000);
  // Don't forget to add clearInterval when you want to terminate setInterval();
  //clearInterval(changeColor);
});

.purple {
  background-color: purple;
}

.white {
  background-color: white;
}

.wrapper {
  height: 150px;
  width: 150px;
  position: absolute;
  border: 1px solid #cccccc;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
</div>

$(document).ready(function() {
  var changeColor = setInterval(function() {
    var hasClassPurple;
    $(".div-wrapper").each(function(index) {
      hasClassPurple = $(this).hasClass("purple");
      if (true === hasClassPurple) { $(this).removeClass("purple").addClass("white");
      } else {
       $(this).removeClass("white");  $(this).removeClass("white").addClass("purple");
      }
    });
  }, 1000);
  // Don't forget to add clearInterval when you want to terminate setInterval();
  //clearInterval(changeColor);
});

.wrapper {
  float: left;
  position: absolute;
}

.purple {
  background-color: purple;
}

.white {
  background-color: white;
}

.div-wrapper {
  float: left;
  height: 100px;
  width: 100px;
  position: realtive;
  ;
  border: 1px solid #cccccc;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='wrapper'>
  <div class="div-wrapper purple">
  </div>
  <div class="div-wrapper white">
  </div>
  <div class="div-wrapper purple">
  </div>
  <div class="div-wrapper white">
  </div>
</div>

edited Feb 14, 2018 at 4:30

answered Feb 13, 2018 at 6:33

Dipak

2,3065 gold badges26 silver badges56 bronze badges

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

4 Comments

George Salamanca Over a year ago

that is one part of what I want to do. But what I really want is to have four divs not one and to pass the time event through a loop to iterate through an array that is made up of the wrapper class of each div.

Dipak Over a year ago

Ok then after 2 hours I shall in front of computer, I shall give you an answer.

Dipak Over a year ago

can you explain me particular requirement in simple Lehman style.

Dipak Over a year ago

@GeorgeSalamanca I have update code with multiple box, please see my answer, as your question code what I understand and trying to give an answer.

George Salamanca · Accepted Answer · 2018-02-18 07:23:04Z

I was able to find the answer by using recursion, a for loop and set interval. The loopIt function changes the color to purple every two seconds and the loopIt2 function changes the color back to its css-assigned color every two seconds but starting one second after function loopIt. The loop stops the recursion after it iterates through the length of the array.

var save = [".1", ".0", ".3", ".2", ".1"];   

var i = 0;

function loopIt(i) {

setTimeout(function(){ 

  $("."+save[i]).css("background-color", "purple");

  if(i < save.length - 1)  loopIt(i+1)}, 2000);
}

function loopIt2(i) {
  setTimeout(function(){

setTimeout(function(){ $("."+save[i]).css("background-color", ""); },1000)

  if(i < save.length - 1)  loopIt2(i+1)}, 2000);
}

This is the final project result https://codepen.io/salamancajr/pen/ZrKKaa?editors=0010

Collectives™ on Stack Overflow

setTimeOut in while loop

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related