如何在web前端里实现打字机插件

这篇文章主要介绍了如何在web前端里实现打字机插件的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇如何在web前端里实现打字机插件文章都会有所收获，下面我们一起来看看吧。

创新互联公司专注于中大型企业的成都做网站、网站建设和网站改版、网站营销服务，追求商业策划与数据分析、创意艺术与技术开发的融合，累计客户上1000家，服务满意度达97%。帮助广大客户顺利对接上互联网浪潮，准确优选出符合自己需要的互联网运用，我们将一直专注成都品牌网站建设和互联网程序开发，在前进的路上，与客户一起成长！

最简单的打字机

const dom = document.querySelector('.content')
const data = '最简单的打字效果代码'.split('')
let index = 0
function writing(index) {
   if (index < data.length) {
       dom.innerHTML += data[index]
       setTimeout(writing.bind(this), 200, ++index)
   }
}
writing(index)

最简单的打字机，简单的通过定时器实现了文字的增加，通过这个例子我们能够得到一个具体的实现思路，当然一些功能或者性能上的问题还需要不断地优化，但是我们可以以此作为基础来设计一款插件。

1. 新增向后删除动效

所以我们新增一个当前的打字状态

当 state 为 "typing" 的时候代表向前打字，相反为向后删除，

然后就是处理删除部分的逻辑，这部分的逻辑和向前新增是一样的，并且我们也要在删除到最后一个字符之后把状态改为 "typing"

2. 新增速度，向后删除速度可控

然后还可以自定义向前新增或者向后删除的速度，通过当前的状态来判断就可以

3. 输入文字可以为单个字符串也可以为字符串数组

并且支持传入一个字符串数组而不是单个的字符串，因为实际的需求可能是多个字符串之间一直轮换

首先单个字符的逻辑没什么好说的，字符串的数组的话，就需要新增一个index用于判断当前打字机进行到了哪一个字符串，

通过 changeTextIndex 这个函数，就可以不断地更新当前字符串，做到字符串数组循环播放的效果

4. 开启延迟

新增字符串开始和结束的延迟

用于控制每次打字结束之后，需要等待的时间

5. 停止打字

打字机运行的过长当中，由于底层是通过定时器实现的，那么就一定需要在不使用的时候将其关闭，避免造成性能的浪费，比方说在首页实例化了一个打字机，但是进入到别的页面的时候就不再需要这个打字机了，那么就需要将其停下。

通过在实例上绑定一个函数来停下当前打字机的进行，当调用的时候，会将下一个定时器赋值为 null，从而停下打字机的运行。

6. 使用 callback 回调解决小程序问题

上述的代码当中，我们都去修改了 dom 节点来实现打字机字符的改变，那么在小程序或者是其他不存在 dom 或者是 dom 修改的 api 不再是 innerhtml 的时候，插件就无法进行支持，所以对此进行兼容，显示通过 callBackText 来保存当前的字符串，然后在利用一个函数来决定，这个字符串的使用方式

在存在 callback 的情况下，优先将字符串通过 callback 回调出去，让业务拿到这个字符串并且自己去处理改变的逻辑，这样在哪都能够进行打字效果，并且不在依赖环境。

这里那我自己的 uniapp 项目做一个示例

如何在web前端里实现打字机插件