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