Javascript Jquery在文本中循环，显示在屏幕上

我有下面的代码在一个文本列表中循环，并淡入淡出div中的每一段文本。目前，只要我刷新页面，列表的最后一个元素（txt[4]）就会淡入屏幕，几乎就像它立即通过while循环一样，而不在屏幕上显示任何内容

var txt = ["txt1","txt2","txt3","txt4","txt5"]

 var ctr = 0
 
 $(document).ready(function() {

    while(ctr < 5){
        setTimeout(placeText(),1200)
        ctr++;
        fadeIn()
        setTimeout(fadeOut(),1200)

    }
});

function placeText() {
    $("#fader").text(txt[ctr])
    console.log("placed")
 }

 function fadeIn(){
    $("#fader").delay(800).animate({
        "opacity": "1"
      }, 1200,);
 }

 function fadeOut(){
    $("#fader").delay(800).animate({
        "opacity": "0"
      }, 1200,);
 } 

var txt=[“txt1”、“txt2”、“txt3”、“txt4”、“txt5”]
var ctr=0
$（文档）.ready（函数（）{
而（ctr<5）{
setTimeout（placeText（），1200）
ctr++；
法代因（）
设置超时（淡出（），1200）
}
});
函数placeText（）{
$（“#音量控制器”）.text（txt[ctr]）
控制台日志（“放置”）
}
函数fadeIn（）{
$（“#音量控制器”）。延迟（800）。设置动画({
“不透明度”：“1”
}, 1200,);
}
函数衰减（）{
$（“#音量控制器”）。延迟（800）。设置动画({
“不透明度”：“0”
}, 1200,);
} 

这里有两个问题：

setTimeout

要求回调作为参数，但在代码中（

setTimeout（placeText（），1200）

）会立即调用回调，而不是将其作为参数提供。它应该是

setTimeout（placeText，1200）

如果上述条件已确定：

setTimeout

在超时过期之前不会阻止代码的执行；它计划在超时过期后调用回调。因此，所有回调都计划在未来1200毫秒左右执行，这不是您想要的

为了让它们按顺序执行，您可以计算超时（例如，第一个为1200，第二个为1200*3[加上延迟]，等等），但这很快就会变得很麻烦。理想情况下，此代码可以使用async/await编写，并承诺如下：

const wait = ms => new Promise(resolve => setTimeout(resolve, ms));

async function() {
    while(ctr < 5){
        await wait(1200);
        placeText();
        ctr++;
        await fadeIn();
        await wait(1200);
        await fadeOut();
    } 
}

// Make similar changes to the other functions
async function fadeOut(){
   return $("#fader").delay(800).animate({
       "opacity": "0"
     }, 1200).promise();
}  

const wait=ms=>newpromise（resolve=>setTimeout（resolve，ms））；
异步函数（）{
而（ctr<5）{
等待等待（1200）；
placeText（）；
ctr++；
等待法代因（）；
等待等待（1200）；
等待淡出（）；
} 
}
//对其他功能进行类似的更改
异步函数淡出（）{
返回$（“#音量控制器”）。延迟（800）。设置动画({
“不透明度”：“0”
}，1200）允诺；
}  

Damn，正要发布相同的答案：）