Javascript 在添加和删除类之间的J-Query中添加延迟

我一直在做一个“西蒙类型的游戏”，其中有四个灰色按钮，按下开始按钮后，一个按钮将亮起绿色，然后返回灰色，然后下一个按钮将亮起绿色，然后返回灰色，等等。然后你必须重复亮起顺序。我唯一的问题似乎是J-Query的.delay（）效果在添加和删除类之间不起作用（顺便提一下，我通过添加然后删除类使其变为绿色）。有没有人能告诉我一个延迟的方法，如果你能解释一下你的步骤，那就更好了。我的代码将在下面。谢谢你的时间！（下面的代码显示了使用的多种策略，但都失败了）

#屏幕{
高度：600px；
宽度：1000px；
/*背景色：#000000*/*用于视觉目的*/
左边距：自动；
右边距：自动；
}
#lvlselect{
高度：510px；
宽度：600px；
背景色：#FFA500；
位置：绝对位置；
边界半径：100px；
边框：5px实心#CC8400；
z指数：-1；
左边距：200px；
利润上限：-30px
}
#指示{
高度：500px；
宽度：700px；
背景色：#000000；
颜色：#FFFFFF；
字体大小：34px；
边界半径：60px；
边框：5px实心#191919；
文本对齐：居中；
左边距：自动；
右边距：自动；
文本阴影：4px1px6px#4c4c；
利润上限：-40px；
}
#头饰{
字体大小：50px；
}
#轻松的{
高度：120px；
宽度：300px；
背景色：#19FF19；
边界半径：40px；
光标：指针；
文本对齐：居中；
左边距：自动；
右边距：自动；
边框：1px实心#000000；
}
#中等{
高度：120px；
宽度：300px；
背景色：#FFFF19；
边界半径：40px；
光标：指针；
文本对齐：居中；
左边距：自动；
右边距：自动；
边框：1px实心#000000；
}
#硬的{
高度：120px；
宽度：300px；
背景色：#FF0000；
边界半径：40px；
光标：指针；
文本对齐：居中；
左边距：自动；
右边距：自动；
边框：1px实心#000000
}
.游戏模式{
字号：80px；
线高：120px
}
#准备好了吗{
高度：150像素；
宽度：300px；
背景色：#0000E5；
边界半径：80px；
边框：3px实心#0000B2；
左边距：自动；
右边距：自动；
文本对齐：居中；
线高：150px；
字体大小：60px；
位置：绝对位置；
左边距：350px；
利润上限：-250px；
光标：指针；
}
#现成的{
高度：150像素；
宽度：300px；
背景色：#0000E5；
边界半径：80px；
边框：3px实心#0000B2；
左边距：自动；
右边距：自动；
文本对齐：居中；
线高：150px；
字体大小：60px；
位置：绝对位置；
左边距：350px；
边缘顶部：100px；
光标：指针；
}
.没有{
高度：200px；
宽度：400px；
背景色：#A6；
边界半径：50px；
利润上限：-50px；
左边距：66px；
位置：绝对位置；
边框：3px实心#4C；
}
.钮扣二{
高度：200px；
宽度：400px；
背景色：#A6；
边界半径：50px；
位置：绝对位置；
利润上限：-50px；
左边距：532px；
边框：3px实心#4C；
}
buttonthree先生{
高度：200px；
宽度：400px；
背景色：#A6；
边界半径：50px；
利润上限：200px；
左边距：66px；
位置：绝对位置；
边框：3px实心#4C；
}
巴顿福先生{
高度：200px；
宽度：400px；
背景色：#A6；
边界半径：50px；
利润上限：200px；
左边距：532px；
位置：绝对位置；
边框：3px实心#4C；
}
李特普先生{
高度：200px；
宽度：400px；
背景色：#008000；
边界半径：50px；
利润上限：-50px；
左边距：66px；
位置：绝对位置；
边框：3px实心#007300；
}​

函数等待（毫秒）{
var d=新日期（）；
var n=d.getTime（）+ms；
var t=0；
while（n>t）{
d=新日期（）；
t=d.getTime（）；
//警报（t）；
//位置。更新（正确）；
}
//对于（i=1；i