jquery实现文本逐字出现效果(类似于打字机效果)

jquery实现文本逐字出现效果

最近手里有个非前后端分离的项目，有一个需要逐字显示的功能，而且必须要逐行，逐字显示。

process_one() 方法是处理每一行的数据，将每一行的数据传给add()方法，然后设置时间间隔进行下一行处理，直到完全处理完成。这里我是用递归处理的。

add()方法是处理每一行中的文字逐个显示的方法，

// 这是取值的div
<div id="info_one" class="mainText info" style="opacity: 0;height:0;">
    {!! $card->brief_html !!}  
    // 里面的值是从富文本取过来的,都带着P标签  <p>都是这种</p>
</div>
//这是最终渲染的div
 <div id="info_show_one" class="mainText info"></div>

   $(function() {
            var dom_index = 0; // p标签计数index
    		// 处理每一行
            function process_one(arrs, dom) {
                let nodeArr = []
                nodeArr = $("#info_one p")
                if (nodeArr.eq(0).text().length == 0) return;

                let wordIndex = 0 // 每个文字的index
                let node = nodeArr.eq(dom_index) // 获取P标签
                let textItem = nodeArr.eq(dom_index).text() // P标签的文字
                let time = nodeArr.eq(0).text().length - 1 //每行完成时间，作为下一行开始时间间隔
                // 开始执行逐字加载
                add(node, textItem, wordIndex, dom)
                let timer2 = null;
                
                // 设置定时器来间隔开每行文字的触发
                timer2 = setTimeout(function() {
                    if (dom_index < nodeArr.length) {
                        process_one(arrs, dom)
                    } else {
                        clearTimeout(timer2)
                        return;
                    }
                }, time * 500)
            }

            // 添加文字
            function add(node, textItem, wordIndex, dom) {
                let newP = ''
                let timer = null
                timer = setInterval(function() {
                    if (wordIndex != textItem.length - 1) {
                        newP += textItem[wordIndex]
                        wordIndex++;
                        node.html(newP)
                        $("#info_show_one").append(node)
                    } else {
                        wordIndex = 0;
                        clearInterval(timer)
                    }
                }, 500)

            }
            // 调用  把P标签和目标dom的id都穿进去，当然你也可以才用其他方法来获取P标签
            process_one($("#info_one p"), 'info_show_one')
        });