Javascript 动画文本异步作用域问题

我有一个名为animte的函数，它将初始字符串推送到asyn函数中

export function sleep(ms) {
  return new Promise(resolve => setTimeout(resolve, ms));
}

export async function typeAnimation(text, timing, callback) {
  let concatStr = "";
  for (const char of text) {
      concatStr += char;
      await sleep(timing);
      callback(concatStr);
  }  
}

我想给文本设置动画，并给animate函数一个动画文本的返回值——但我被困在回调函数中

function animate(placeholder) {
    //console.log("placeholder", placeholder);
    //let placeHolderText = "";

    //this.holdz = "xxxxxx";

    //let that = this;

    let newText = typeAnimation(placeholder, 100, function(msg){
      console.log("msg", msg);

      //placeHolderText = msg;

      //return msg;
    });

    //newText.then( (val) => console.log("asynchronous logging has val:",val) );

    /*
    console.log("newText", newText)

    newText.then(function(msg){
      return msg;
    })*/

    //return this.holdz;

    //return placeHolderText;

    return placeholder;
}

---

听起来您可能需要一个生成器函数。您有这样一个例子吗？--我试着对它进行调整--如何使它与我试图处理的示例一起工作？听起来你可能需要一个生成器函数。你有这样的示例吗？--我已经试着去适应它--我将如何使它与我试图处理的示例一起工作？