Javascript 将进程插入队列以异步工作

我试图制作一个简单的网页，当我们在文本框中输入文本值时，一旦用户在两个文本之间插入逗号，就会生成一个新按钮。当用户按下enter键时，buttons类应该在警告和危险之间切换

我能够做到这一点，所以我也尝试添加延迟，但问题是所有按钮类切换都发生在一起，而不是以随机方式逐个进行。为了创建一个随机切换序列，我为它创建了一个随机的数字排列，但是由于所有按钮类都是同时切换的，所以我没有得到所需的结果

所需的结果是，首先应完成一个按钮的切换，然后再完成另一个按钮的切换-我如何实现这一点

let元素=document.querySelector（'.textarea'）；
设cont=document.querySelector（'.groupofbtns'）；
设lastlen=0；
const pause=（timeoutMsec）=>新承诺（resolve=>setTimeout（resolve，timeoutMsec））
异步函数主（grp）{
//这是我试图在切换之间创建的延迟，但它同时对所有按钮执行。
grp.classList.remove（“btn警告”）；
grp.classList.add（“btn危险”）；
等待暂停（3*1000）
grp.classList.remove（“btn危险”）；
grp.classList.add（“btn警告”）；
}
元素。addEventListener（“键控”，函数（事件）{
如果（event.keyCode===13）{
让grp=document.queryselectoral（'.btn'））
设l=grp.length-1，arr=[]；
console.log（grp.length）
做{
设num=Math.floor（Math.random（）*l+1）；
arr.push（num）；
arr=arr.filter（（项目，索引）=>{
返回arr.indexOf（项目）==索引
});
}而（arr.length0）{
继续删除child（grp[grp.length-1-i]）；
i++；
差异--；
拉斯伦--；
}
}
}
});
元素。addEventListener（'input'，函数（事件）{
设val=element.value；
//console.log（val）
设strArr=val.split（'，'）
设b，f；
如果（strArr.length>1）{
b=strArr；
而（b[b.length-1]=“”）
b、 流行音乐（）
f=b[b.长度-1]；
如果（event.keyCode！==8）{
如果（strArr.length>lastlen）{
让butt=document.createElement（'button'）；
butt.classList.add（'btn'）
butt.classList.add（'btn-warning'）
//butt.classList.add（'container'）
butt.classList.add（'active'）
butt.innerText=`${f}`
续附件（对接）
lastlen=strArr.length
//cont.innerHTML+=`${f}`；
}//element.value=val；
否则{
设b=document.queryselectoral（'.btn'））
b[b.length-1]。innerText=`${f}`
}
}
}
})

.h
{
显示器：flex；
弯曲方向：立柱；
宽度：50%；
利润率最高：30%；
对齐项目：居中；
文本对齐：居中；
}
实验室
{
颜色：白色；
}
.btn
{
利润率：0.8%0.8%；
}
.分组
{
宽度：50%；
利润率最高：2%；
对齐项目：居中；
}

随机颜色选择器
在此处输入您的选择，并用
逗号，按
当你是
完成