需求：
公司推广用的游戏需要走养成类剧情，人物对话上也要按照养成类游戏通常的设置，1. 对话逐字显示直至完整；2. 点击对话中文字之后停止逐字显示，将剩余文字一次性补全。因此做了一个简单的调研。
控制文字显示的大致想法，首先是逐字setTimeout。但setTimeout的坏处，一是this指向document，二是无法用jquery链式调用。
因此首先寻找到了一个jquery.wait的插件，解决了链式调用的问题。
如何使用链式调用呢? 因为字符数可变，我先尝试写了一个for循环，往容器里逐字添加内容。需求1成功解决，但需求2则无法控制（尝试过各种方法）。我没有对插件的代码进行分析，于是换了一种递归式写法：
var clicked = false ;
var locate = 0 ;
var text = '李易峰，中国内地男演员、歌手、制片人。1987年5月4日出生于四川成都。2010年毕业于四川师范大学电影电视学院。2007年参加《加油好男儿》出道，同年12月发行首张EP《四叶草》。2009年发行首张个人专辑《小先生》。2010年主演电视剧《幸福一定强》和《幸福最晴天》，获2011年国剧盛典最佳新演员奖。2012年在《真爱谎言》中挑战扮演自闭症患者。2013年凭借电视剧《千金归来》获得乐视盛典最受欢迎男演员奖。2014年7月因电视剧《古剑奇谭》中“百里屠苏”一角而获得广泛关注；同年出演 ..';
var obj = text.split("");
console.log(obj.length);
var output = $('#output');
output.on('click', function(){
clicked = true ;
console.log('click');
})
output.on("myOwnEvent", function(event, locate){
console.log(locate);
if( clicked == true ){
console.log('stop');
$(this).text(text);
}
else{
if( locate < obj.length-1 ){
locate++;
$(this).append(obj[locate]).wait(100).trigger('myOwnEvent',locate);
}
}
});
output.on('startAdd', function(event){
$(this).append(obj[locate]).wait(100).trigger('myOwnEvent',locate);
})
output.trigger('startAdd');
上面的代码使用了自定义的event，在每添加一个字之后做一次处理，如果遇到clicked则停止逐字，一次性显示；否则添加下一个字。
因为是测试代码，所以没有进行封装，这一套机制封装起来也应十分方便。
