jq实现逐字打印效果

无意中看到比特之理博客上的自动打字JS实现文章，看了下代码实现逻辑，觉得这效果代码有些地方还是值得学习下的。


运行代码测试了下，发现有2个小问题：一是换行打印会有下划线输出停顿，二是结束符可能会多输出一下划线字符。针对这2个问题，改进了下原始代码，注释部分可谓是该效果的精髓所在吧，源码如下：
<div id="autotype">
    <p>two_step_auth_command.bui</p>
    <br>
    <p>for agent 54348</p>
    <p>中文文字测试测试</p>
</div>
<script>
    $.fn.autotype = function() {
      var _this=$(this);
      var str=_this.html();
      // 正则替换代码行之间添加的多个空格，不去除换行输出会有明显的停顿：实际是在输出多个空格
      str=str.replace(/(\s){2,}/g,"$1");
        var index = 0;
        $(this).html('');
        var timer = function() {
            var args=arguments;
            var current = str.slice(index, index+1);
            // html标签完整输出,如：<p>
            if (current == '<'){
                index = str.indexOf('>', index) + 1;
            }
            else{
            index++;
            }
            //位运算符: 根据setInterval运行奇偶次来判断是否加入下划线字符“_”，使输入效果更逼真
            if (index < str.length-1){ //打印字符倒数第2个字符开始，不加下划线字符，以防止结束符可能会多输出一下划线字符
                _this.html(str.substring(0, index) + (index & 1 ? '_' : ''));
            }else{
                _this.html(str.substring(0, index));
                clearTimeout(timer);
            };
            setTimeout(args.callee,70)
        };
        // 延迟1s开始
        setTimeout(timer,1000);
    };
    $("#autotype").autotype();
</script>


相信很多朋友都曾在电影中看到过这样一幕：黑客高手在电脑上以极快的速度 ，一阵狂敲键盘，电脑屏一串串不知所谓的代码就出来，然后再切个模糊的镜头给观众看下电脑屏，以表示黑客已做完该做的事啦。呵呵