1. loading - 在等待打字内容的时候光标会一直显示且闪烁
2. tyeing - 在打字中光标会显示但不闪烁
3. end - 在打字结束后光标隐藏

<p style="padding: 10px" id="chat"></p>
<button onClick="printText(chat,content)">键入字符</button>

// 光标字符显示
.typing::after {
  content: '▌';
}
// 光标闪烁动画
.blinker::after {
  animation: blinker 1s step-end infinite;
}
@keyframes blinker {
  0% {
    visibility: visible;
  }
  50% {
    visibility: hidden;
  }
  100% {
    visibility: visible;
  }
}

**
* @description:
  * @param {HTMLElement} dom - 打印内容的dom
  * @param {string} content - 打印文本内容
    * @param {number} speed - 打印速度
    * @return {void}
    */
    function printText(dom, content, speed = 50) {
      let index = 0
      setCursorStatus(dom, 'typing')
      let printInterval = setInterval(() => {
        dom.innerText += content[index]
        index++
        if (index >= content.length) {
          setCursorStatus(dom, 'end')
          clearInterval(printInterval)
        }
      }, speed)
    }

    /**
 * @description: 设置dom的光标状态
 * @param {HTMLElement} dom - 打印内容的dom
 * @param {"loading"|"typing"|"end"} status - 打印状态
 * @return {void}
 */
    function setCursorStatus(dom, status) {
      const classList = {
        loading: 'typing blinker',
        typing: 'typing',
        end: '',
      }
      dom.className = classList[status]
    }