如何使用js操纵文字，使其逐字显示出来

需求：
公司推广用的游戏需要走养成类剧情，人物对话上也要按照养成类游戏通常的设置，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则停止逐字，一次性显示；否则添加下一个字。

因为是测试代码，所以没有进行封装，这一套机制封装起来也应十分方便。