Jquery 实现AI聊天逐字显示效果

溪岚画

于 2024-07-28 09:52:32 发布

阅读量54

点赞数 2

文章标签： jquery 前端 javascript AI 聊天

本文链接：https://blog.csdn.net/qq_32719215/article/details/140746914

版权

完整示例

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0"
    />
    <title>Document</title>
    <script
      src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"
      type="text/javascript"
    ></script>
  </head>
  <body>
    <div id="printTextContainer"></div>
    <!--自定义的JS代码-->
    <script type="text/javascript">
      var showPrintText = '';
      var aiOriginText =
        '七律·人民解放军占领南京 毛泽东 钟山风雨起苍黄，百万雄师过大江。虎踞龙盘今胜昔，天翻地覆慨而慷。宜将剩勇追穷寇，不可沽名学霸王。天若有情天亦老，人间正道是沧桑。';
      // 指定容器逐字打印文本
      function print(printTextContainerId, showPrintText, aiOriginText) {
        $('#' + printTextContainerId).text(showPrintText);
        if (showPrintText.length >= aiOriginText.length) {
          return;
        } else {
          setTimeout(() => {
            showPrintText += aiOriginText.charAt(showPrintText.length);
            print(printTextContainerId, showPrintText, aiOriginText);
          }, 100);
        }
      }
      // 指定容器逐字打印文本
      print('printTextContainer', showPrintText, aiOriginText);
    </script>
  </body>
</html>

核心代码及原理

通过定时器将需要输出的文本截取逐字打印，该示例为jquery方式，vue方式同理

// 指定容器逐字打印文本
      function print(printTextContainerId, showPrintText, aiOriginText) {
        $('#' + printTextContainerId).text(showPrintText);
        if (showPrintText.length >= aiOriginText.length) {
          return;
        } else {
          setTimeout(() => {
            showPrintText += aiOriginText.charAt(showPrintText.length);
            print(printTextContainerId, showPrintText, aiOriginText);
          }, 100);
        }
      }