javascript - 创建更逼真的打字效果，随机删除/添加字符

Question

我尝试创建一种更逼真的打字方式，它会产生打字错误并通过删除/添加字符来纠正它们。

然而，我做了一个简单的解决方案，可以通过slice. 但我不知道如何实现错误输入功能。

这是我到目前为止所做的：

var str = 'Foo bar is not equal to bar foo.';
var len = str.length;

var elem = document.body;

var rem = len;
var add = 0;

(function type(){
  if(!rem || add === len) return;

  // write
  elem.innerHTML = str.slice(0, ++add);

  // remove
  // elem.innerHTML = str.slice(0, --rem);

  setTimeout(type, 100);
}());

http://jsbin.com/upufaf/6/edit

任何想法或已经完成的解决方案如何让它发挥作用？

BTW：已经有一种叫做现实打字机的东西，但是我认为这个解决方案对于这个简单的问题来说有点过于臃肿。

Answer 1

var str = 'Foo bar is not equal to bar foo.' ;
var alphabet = 'abcdefghijklmnopqrstuvwxyz' ;
var pos = 0 ;
var tmpStr = '' ;
var doBackspace = false ;
function startTyping (str) {

    if(doBackspace) {
        tmpStr = tmpStr.slice(0,tmpStr.length-1);
        doBackspace = false ;
    } else {

        if(Math.ceil((Math.random()*100)) < 80) {
            tmpStr += str[pos] ;
            pos++ ;

        } else {
            tmpStr += alphabet[Math.floor(Math.random()*(alphabet.length))] ;
            doBackspace = true ;
        }
    }   
    $('body').html(tmpStr) ;

    if(pos < str.length) {
        setTimeout(function(){
            startTyping(str)
        }, 300) ;
    }
}
$(document).ready(function(){
    startTyping(str) ;
});

可以将间隔 300 更改为更高的值以降低打字速度，也可以将字符添加到字母表以增加可能的错误字符数，将 80 更改为更低的值以增加错误的机会