需求:实现一个类似打印的效果(文字一个字一个字的输出)

news2024/9/25 7:23:07

  • 实现效果:

  • 需求:最近接到这么一个需求,ai机器人回复的问题,后端是通过websocket每隔一段事件返回数据,前端拿到数据后直接渲染,现在需要做到一个效果,后端返回的结果前端需要一个一个文字的输出
  • 解决方法:通过setTimeout和递归的方法实现,代码也不难,小编封装的一个函数,方便使用,详细说明在如下代码中
  • 源码:
// 全局下
timer = null
wordIndex = 0
/*
    打印文字
    参数1:dom对象
    参数2:需要打印的字符串
    参数3:延时时长
*/
writing(dom, wordString, delay) {
    // wordIndex标记文字索引值,
    if (wordIndex < wordString.length) { // 如果索引值比文字长度小,继续执行代码
        clearTimeout(timer) // 为了保证每次时间间隔一致,需要清楚时间器
        // 向dom中追加文字,之后索引值+1
        dom.innerText += wordString[wordIndex++]
        // 定时器
        timer = setTimeout(() => {
            // 递归执行该函数
            this.writing(dom, wordString, delay)
        }, delay)
    }
},

// 调用方法
writing('dom标签', '文字字符串', 20)

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1542389.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Unity Canvas的三种模式

一、简介&#xff1a; Canvas的Render Mode一共有三种模式&#xff1a;Screen Space -OverLay、Screen Space-Camera、World Space Screen Space - Overlay&#xff08;屏幕空间 - 覆盖&#xff09;&#xff1a; 这是最简单的 Canvas 渲染模式。UI 元素在这个模式下将渲染在屏…

使用amd架构的计算机部署其他架构的虚拟机(如:arm)

1 下载quem模拟器 https://qemu.weilnetz.de/w64/2 QEMU UEFI固件文件下载(引导文件) 推荐使用&#xff1a;https://releases.linaro.org/components/kernel/uefi-linaro/latest/release/qemu64/QEMU_EFI.fd3 QEMU 安装 安装完成之后&#xff0c;需要将安装目录添加到环境变…

flutter3_douyin:基于flutter3+dart3短视频直播实例|Flutter3.x仿抖音

flutter3-dylive 跨平台仿抖音短视频直播app实战项目。 全新原创基于flutter3.19.2dart3.3.0getx等技术开发仿抖音app实战项目。实现了类似抖音整屏丝滑式上下滑动视频、左右滑动切换页面模块&#xff0c;直播间进场/礼物动效&#xff0c;聊天等模块。 运用技术 编辑器&#x…

C语言字节对齐关键字#pragma pack(n)的使用

0 前言 在进行嵌入式开发的过程中&#xff0c;我们经常会见到对齐操作。这些对齐操作有些是为了便于实现指针操作&#xff0c;有些是为了加速对内存的访问。因此&#xff0c;学习如何使用对齐关键字是对于嵌入式开发是很有必要的。 1 对齐规则 1.0 什么叫做对齐 众所周知&a…

微服务(基础篇-003-Nacos集群搭建)

目录 Nacos集群搭建 1.集群结构图 2.搭建集群 2.1.初始化数据库 2.2.下载nacos 2.3.配置Nacos 2.4.启动 2.5.nginx反向代理 2.6.优化 视频地址&#xff1a; 06-Nacos配置管理-nacos集群搭建_哔哩哔哩_bilibilihttps://www.bilibili.com/video/BV1LQ4y127n4?p29&…

操作系统究竟是什么?在计算机体系中扮演什么角色?

操作系统究竟是什么&#xff1f;在计算机体系中扮演什么角色&#xff1f; 一、操作系统概念二、操作系统如何管理软硬件资源2.1 何为管理者2.2 操作系统如何管理硬件 三、系统调用接口作用四、用户操作接口五、广义操作系统和狭义操作系统 一、操作系统概念 下面是来自百度百科…

Springboot做分组校验

目录 分组校验 Insert分组 Upload分组 测试接口 测试结果 添加测试 更新测试 顺序校验GroupSequence 自定义分组校验 自定义分组表单 CustomSequenceProvider 测试接口 测试结果 Type类型为A Type类型为B 总结&#xff1a; 前文提到了做自定义的校验注解&#xff…

React高阶组件(HOC)

高阶组件的基本概念 高阶组件&#xff08;HOC&#xff0c;Higher-Order Components&#xff09;不是组件&#xff0c;而是一个函数&#xff0c;它会接收一个组件作为参数并返回一个经过改造的新组件&#xff1a; const EnhancedComponent higherOrderComponent(WrappedCompo…

小游戏-扫雷

扫雷大多人都不陌生&#xff0c;是一个益智类的小游戏&#xff0c;那么我们能否用c语言来编写呢&#xff0c; 我们先来分析一下扫雷的运行逻辑&#xff0c; 首先&#xff0c;用户在进来时需要我们给与一个菜单&#xff0c;以供用户选择&#xff0c; 然后我们来完善一下&#…

解决方案Please use Oracle(R) Java(TM) 11, OpenJDK(TM) 11 to run Neo4j.

文章目录 一、现象二、解决方案 一、现象 当安装好JDK跟neo4j&#xff0c;用neo4j.bat console来启动neo4却报错&#xff1a; 部分报错信息&#xff1a; Starting Neo4j. WARNING! You are using an unsupported Java runtime. Please use Oracle Java™ 11, OpenJDK™ 11 t…

Rust下载安装、卸载、版本切换、创建项目(包含指定版本的)

先声名一下&#xff0c;下面所说的版本号为xxxxx-x86_64-unknown-linux-gnu中xxxxx的部分。 下载安装 下载最新版本的Rust&#xff1a; curl --proto https --tlsv1.2 -sSf https://sh.rustup.rs | sh info: downloading installer重启shell 或者 按照提示 执行命令让环境变…

Day56-LNMP架构扩展为集群模式实战精讲

Day56-LNMP架构扩展为集群模式实战精讲 1. 企业级标准部署知乎产品wecenter1.1 部署知乎软件Wecenter 2. 企业级迁移数据库到独立服务器2.1 为什么要进行数据库的拆分2.2 数据库拆分架构演变过程&#xff0c;如下图所示2.3 数据库拆分环境规划2.4 数据库拆分架构详细步骤2.4 we…

Kafka broker

1. zk中存储的kafka信息 /kafka/brokers/ids存储了在线的broker id。 /kafka/brokers/topics/xxx/partitions/n/state存储了Leader是谁以及isr队列 /kafka/controller辅助Leader选举&#xff0c;每个broker都有一个controller&#xff0c;谁先在zk中注册上&#xff0c;谁就辅助…

第八节:深入讲解SMB中的Http组件

一、概述 Http组作是SMB中的核心组件之一&#xff0c;在第七节中讲解了如何简洁的进行web程序部署和运行&#xff0c;这只是它的功能之一。在本节中&#xff0c;我们将介绍Http组件的重要属性。 二、请求头Request 1、支持方法 支持POST、GET、PUT、DELETE、OPTIONS等方法&a…

二十、软考-系统架构设计师笔记-真题解析-2020年真题

软考-系统架构设计师-2020年上午选择题真题 考试时间 8:30 ~ 11:00 150分钟 1.按照我国著作权法的权利保护期&#xff0c;&#xff08; &#xff09;受到永久保护。 A.发表权 B.修改权 C.复制权 D.发行权 解析&#xff1a; 答案&#xff1a; 2.假设某计算机的字长为32位&a…

爬虫入门系列-HTML基础语法

&#x1f308;个人主页&#xff1a;会编辑的果子君 &#x1f4ab;个人格言:“成为自己未来的主人~” HTML基础语法 bs4解析比较简单&#xff0c;但是呢&#xff0c;首先你需要了解一丢丢的html知识&#xff0c;然后再去使用bs4去提取&#xff0c;逻辑和编写难度就会非常简…

Git的原理和使用(四)

目录 远程操作 理解分布式版本控制系统 远程仓库 新建远程仓库 克隆远程仓库 向远程仓库推送 拉取远程仓库 配置Git 忽略特殊文件 为命令配置别名 标签管理 理解标签 创建标签 操作标签 远程操作 理解分布式版本控制系统 1、每个人的电脑上都是一个完整的版本库…

BUG未解之谜01-指针引用之谜

在leetcode里面刷题出现的问题&#xff0c;当我在sortedArrayToBST里面给root赋予初始值NULL之后&#xff0c;问题得到解决&#xff01; 理论上root是未初始化的变量&#xff0c;然后我进入insert函数之后&#xff0c;root引用的内容也是未知值&#xff0c;因此无法给原来的二叉…

如何使用半群、群论及格理论研究人机协同

在数学中&#xff0c;半群、群论和格理论都是重要的代数结构和数学分支&#xff0c;它们分别研究了不同类型的代数系统和结构。简单介绍一下它们的基本概念&#xff1a; 1、半群&#xff08;Semigroup&#xff09;&#xff1a; 半群是一个集合&#xff0c;配备了一个二元运算&a…

Linux:文件增删 文件压缩指令

Linux&#xff1a;文件增删 & 文件压缩指令 文件增删touch指令mkdir指令cp指令rm指令rmdir指令 文件压缩zip & unzip 指令tar指令 文件增删 touch指令 功能&#xff1a;touch命令参数可更改文档或目录的日期时间&#xff0c;包括存取时间和更改时间&#xff0c;或者新…