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