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

  • 实现效果:

  • 需求:最近接到这么一个需求,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)

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

STM32微控制器的中断优先级设置中,抢占优先级和子优先级如何影响中断响应?

在STM32微控制器中&#xff0c;中断优先级设置是一个关键的概念&#xff0c;它决定了在发生多个中断时&#xff0c;哪些中断能够优先被处理。STM32的中断优先级系统包括抢占优先级&#xff08;Preemption Priority&#xff09;和子优先级&#xff08;Subpriority&#xff09;&a…

P - Beat

题目分析 1.看数据范围&#xff0c;大概知道dfs能做 2.自0问题开始查找&#xff0c;确保之后每次查找到的问题的困难度均大于上一次 3.遍历所有情况再记录cnt即可 代码 #include <iostream> #include <algorithm> #include <cstdio> #include <cstring&…

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 或者 按照提示 执行命令让环境变…

华为数通 HCIP-Datacom H12-831 题库补充

2024年 HCIP-Datacom&#xff08;H12-831&#xff09;最新题库&#xff0c;完整题库请扫描上方二维码&#xff0c;持续更新。 缺省情况下&#xff0c;PIM报文的IP协议号是以下哪一项&#xff1f; A&#xff1a;18 B&#xff1a;59 C&#xff1a;103 D&#xff1a;9 答案&a…

Excel打开CSV文件中文乱码问题

Excel的数据导入功能 直接用Excel打开下载的CSV文件&#xff0c;会看到汉字乱码&#xff0c;数字显示正常。如下图所示现象。 请先正常打开一份空白的excel文件&#xff0c;将鼠标定位在第一行第一列&#xff0c;这边鼠标定位的位置将决定后续打开的csv文件在excel中展示的位置…

链表oj测试题(下)

1.链表反转 大家有没有过将链表反转的想法&#xff0c;与数组反转不同的是这里的反转后是将每个节点的地址白村反过来&#xff0c;当然也可以遍历链表然后从尾节点开始尾插到新链表中&#xff0c;然后将新链表的头结点返回即可。我们今天要学的是第一个方法。当然第二个想法也…

nodejs+vue高校心理健康评测与服务系统python-flask-django-php

随着社会的发展&#xff0c;系统的管理形势越来越严峻。越来越多的用户利用互联网获得信息&#xff0c;但各种信息鱼龙混杂&#xff0c;信息真假难以辨别。为了方便用户更好的获得高校心理健康评测与服务&#xff0c;因此&#xff0c;设计一种安全高效的高校心理健康评测与服务…

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;谁就辅助…

PWM实现电机的正反转和调速以及TIM定时器

pwm.c #include "pwm.h"/* PWM --- PA2 --TIM2_CH3 //将电机信号控制一根接GND,一根接在PA2(TIM2_CH3)&#xff0c; 输出PWM控制电机快慢 TIM2挂在APB1 定时器频率&#xff1a;84MHZ*/ void Pwm_Init(void) {GPIO_InitTypeDef GPIO_InitStruct;TIM_TimeBaseInitT…

信号处理与分析——matlab记录

一、绘制信号分析频谱 1.代码 % 生成测试信号 Fs 3000; % 采样频率 t 0:1/Fs:1-1/Fs; % 时间向量 x1 1*sin(2*pi*50*t) 1*sin(2*pi*60*t); % 信号1 x2 1*sin(2*pi*150*t)1*sin(2*pi*270*t); % 信号2% 绘制信号图 subplot(2,2,1); plot(t,x1); title(信号x1 1*sin(…

nodejs+vue城市交通管理系统的设计与实现pythonflask-django-php

城市交通管理系统的目的是让使用者可以更方便的将人、设备和场景更立体的连接在一起。能让用户以更科幻的方式使用产品&#xff0c;体验高科技时代带给人们的方便&#xff0c;同时也能让用户体会到与以往常规产品不同的体验风格。 与安卓&#xff0c;iOS相比较起来&#xff0c;…

利用pexpect实现ssh自动登录时命令行无法自动换行问题解决

问题描述 使用python的pexpect模块的pexpect.spawn()进行ssh自动登录时&#xff0c;出现超出一定长度&#xff08;80个字符&#xff09;时光标自动切换到本行行首进行覆盖输入的情形 原因 使用spawn时输入窗口大小默认限制为[24,80]&#xff08;可通过spawn类的getwinsize(…

HarmonyOS实战开发-如何使用首选项能力实现一个简单示例。

介绍 本篇Codelab是基于HarmonyOS的首选项能力实现的一个简单示例。实现如下功能&#xff1a; 创建首选项数据文件。将用户输入的水果名称和数量&#xff0c;写入到首选项数据库。读取首选项数据库中的数据。删除首选项数据文件。 最终效果图如下&#xff1a; 相关概念 首选…

人工智能(Educoder)-- 搜索技术 -- 启发式搜索

任务描述 本关任务&#xff1a;八数码问题是在一个33的棋盘上有1−8位数字随机分布&#xff0c;以及一个空格&#xff0c;与空格相连的棋子可以滑动到空格中&#xff0c;问题的解是通过空格滑动&#xff0c;使得棋盘转化为目标状态&#xff0c;如下图所示。 为了简化问题的输…

简单使用Swagger

文章目录 1、介绍2、 使用步骤3、 常用注解 1、介绍 Swagger 是一个规范和完整的框架&#xff0c;用于生成、描述、调用和可视化 RESTful 风格的 Web 服务(https://swagger.io/)。 它的主要作用是&#xff1a; 使得前后端分离开发更加方便&#xff0c;有利于团队协作 接口的文…

数据可视化-ECharts Html项目实战(6)

在之前的文章中&#xff0c;我们学习了如何设置散点图、雷达图。想了解的朋友可以查看这篇文章。同时&#xff0c;希望我的文章能帮助到你&#xff0c;如果觉得我的文章写的不错&#xff0c;请留下你宝贵的点赞&#xff0c;谢谢数据可视化-ECharts Html项目实战&#xff08;5&a…

软考96-上午题-【操作系统】-文件目录

一、文件目录 1-1、定义 为了实现“按名存取”&#xff0c;系统必须为每个文件设置用于描述和控制文件的数据结构&#xff0c;它至少要包括&#xff1a;文件名、存放文件的物理地址。 这个数据结构称为&#xff1a;文件控制块(FCB)&#xff0c;文件控制块的有序集合称为文件…

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

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

Web前端Html的表单

表单的关键字&#xff1a; form标签表示一个表单区域 action“后端地址” method“提交数据方式:get/post” input 单行输入框 type“text” 文本 name“定义名称 名字自定义” 向后端提交的键 readonly“readonly” 只读&#xff0c;不可修改&#xff0c;但是可以提交 disab…

Django 三板斧、静态文件、request方法

【一】三板斧 【1】HttpResponse &#xff08;1&#xff09;介绍 HttpResponse是Django中的一个类&#xff0c;用于构建HTTP响应对象。它允许创建并返回包含特定内容的HTTP响应。 &#xff08;2&#xff09;使用 导入HttpResponse类 from django.http import HttpResponse创…