需求：实现一个类似打印的效果（文字一个字一个字的输出）

❆VE❆2024-03-27 20:12

实现效果：

需求：最近接到这么一个需求，ai机器人回复的问题，后端是通过websocket每隔一段事件返回数据，前端拿到数据后直接渲染，现在需要做到一个效果，后端返回的结果前端需要一个一个文字的输出
解决方法：通过setTimeout和递归的方法实现，代码也不难，小编封装的一个函数，方便使用，详细说明在如下代码中
源码：

javascript 复制代码

// 全局下
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)