I'm doing an exercise with vanilla javascript that changes a random square in a grid to a random color every 400ms, but the square cannot change color for at least another 3s once once it has changed color. This delay logic is what I'm hung up on.

What's the best way to check to see if the current square has just changed color, and to prevent that square from changing colors for 3 seconds? 

As you can see, I've experimented with adding a new class once a square's color has been changed. I've also tried placing the set timeout within the colorChange function.

[codepen](https://codepen.io/jdagley77/pen/pwOGpN%20/ "codepen")

HTML:

```
<div id="content">
  <div class = "box" id="square1"></div>
  <div class = "box" id="square2"></div>
  <div class = "box" id="square3"></div>
  <div class = "box" id="square4"></div> <br>
  <div class = "box" id="square5"></div>
  <div class = "box" id="square6"></div>
  <div class = "box" id="square7"></div>
  <div class = "box" id="square8"></div> <br>
  <div class = "box" id="square9"></div>
  <div class = "box" id="square10"></div>
  <div class = "box" id="square11"></div>
  <div class = "box" id="square12"></div> <br>
  <div class = "box" id="square13"></div>
  <div class = "box" id="square14"></div>
  <div class = "box" id="square15"></div>
  <div class = "box" id="square16"></div> 
</div>

```

Javascript:

```
setInterval(colorChange, 400);

if (square.className = "colored") {
    square.setTimeout(setColor(), 3000);
} 

function colorChange() {
    var colors = ["red", "blue", "yellow", "green", "orange", "purple"];
    var specificColor = colors[Math.floor(Math.random()*colors.length)];
    var randomId = Math.ceil(Math.random() * 17);
    var square = document.getElementById("square"+randomId);
    square.style.backgroundColor = specificColor;
    square.addClass = "colored";
}

```

Thanks for any help.