Execution waiting javascript

Question

I want the colors to flash sequentially, so the second flash will be after the end of the first one not in the middle. The functions setTimeOut() just reschedule the execution so the script is not waiting for the setTimeOut function.

var array=["Gre","Red","Yel","Blu"];
var action=[];
var response=[];

function clickGreen(){
$("#buttonGre").addClass("activated");
  setTimeout(function() {$("#buttonGre").removeClass("activated");}, 250);
  }
function clickRed(){
$("#buttonRed").addClass("activated");
  setTimeout(function() {$("#buttonRed").removeClass("activated");}, 250);
  }

function clickYellow(){
$("#buttonYel").addClass("activated");
setTimeout(function() {$("#buttonYel").removeClass("activated");}, 250);
  }

function clickBlue(){
$("#buttonBlu").addClass("activated");
  setTimeout(function() {$("#buttonBlu").removeClass("activated");}, 250);
  }

function buildAction(){
  var step=Math.floor((Math.random() * 4));
  action.push(array[step]);
  for(var i=0;i<action.length;i++){
    if(action[i]=="Gre"){
      clickGreen();
    }
    if(action[i]=="Red"){
      clickRed();
    }
    if(action[i]=="Yel"){
      clickYellow();
    }
    if(action[i]=="Blu"){
      clickBlue();
    }
  }
}

.gameContainer {
 position:relative;
 width:440px;
 height:440px;
 margin:0 auto;
  margin-top: 50px;
  border: solid 1px black;
  border-radius: 50%;
  background-color: grey;
}

.fourButton {
 position:absolute;
 width:190px;
 height:190px;
  margin: 20px;
  pointer-events: none;
}

#buttonGre {
 top:0;
 left:0;
 background-color:green;
 border-radius:100% 0 0 0;
}
#buttonRed {
 top:0;
 right:0;
 background-color:red;
 border-radius:0 100% 0 0 ;
}
#buttonYel {
 bottom:0;
 left:0;
 background-color:yellow;
 border-radius:0 0 0 100%;
}
#buttonBlu {
 bottom:0;
 right:0;
 background-color:blue;
 border-radius:0 0 100% 0 ;
}
#center {
  position:absolute;
  background-color:white;
  border: 20px solid grey;
 width:200px;
 height:200px;
 top:100px;
 left:100px;
 border-radius:50%;
}

.activated {
  opacity: .5;
}

#labl{
  margin-left: 50px; 
  margin-top:40px; 
  font-family: Arial; 
  font-size:200%
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="gameContainer ">
  <div id="buttonGre" class="fourButton"></div>
  <div id="buttonRed" class="fourButton"></div>
  <div id="buttonYel" class="fourButton"></div>
  <div id="buttonBlu" class="fourButton"></div>
  <div id="center">
    <div id="labl"><strong>SIMON</strong></div>
    <center>
      </br>
     <button id="count">--</button>
    <button id="start" onclick="buildAction()">start</button>
    <button id="strict">strict</button></br>
    </br>
    <button id="restart">Restart</button></center>
  </div>
</div>