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

  • 实现效果:

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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值