typer.js，可能是最小但功能也不多的模拟打字效果插件

打字机效果文字插件typer.js

---

typer.js介绍

typer.js是模拟打字机效果的轻型js插件（1.6 Kb），有打字、删除、重复和停顿几种简单的效果。

起因

由于这几天写个在线简历，我想使用打字的特效，在github上搜到一个叫TheaterJS的插件，效果很好，但是应用时发现，TheaterJS开发版的体积近80kb,而且我只需要它的打字机效果，不需其他复杂的功能，于是又萌生了自己造轮子的想法。

构思

之前写的listen2me用过类似的文字单播的效果，加上见过许多其他打字机效果，心里觉得还是有底的。

想了想自己的需求，效果上分为两块：

1. 文字逐个显示
2. 闪烁的光标

在使用上需要：

1. 输出内容控制简便，模仿TheaterJs输出时的链式调用方法。
2. 控制速度、停顿等

研究过程

一些错误的想法

打字效果很简单，简单的JS代码配合CSS就很好的还原了TheaterJS的效果，当然这仅是一行文字的输出。

然后研究输出控制。刚开始单纯的以为借用JQUERY可以直接链式调用与事件的顺序执行，具体写代码才发现，jquery的链式调用是操作节点的，而且它的内置函数应该都设定好了对链式操作的支持，我在网上查阅了一些资料，js可以通过对函数return this来支持链式调用。

又研究了事件的顺序，同样，本以为jquery的链式调用可以按顺序执行，比如$('DOM').fadeIn().fadeOut().animate(....)这个操作就是按照淡入、淡出再动画的顺序进行的，后面的操作会等待前面的完成。写代码时又发现，我写的js无法以这个思路实现按序执行，因为打字效果要使用setTimeout这个函数，使得整个过程成为异步，JS执行时自然无法有序。看了一些JQUERY代码，发现除了链式调用外，可以按序执行代码的方法还有使用callback，比如``$('DOM').animate({'width':'100%'},1000,function(){........})。

然后自己陷入了混乱，再乱试了各种方法之后，选择了睡觉。

今天早起，突然就想清楚昨天尝试的方法问题在哪里，比如这段事件等待：