如何降低执行函数的速度

如果您需要捕获数组中的每个更改，请尝试以下操作:

var nameinput = document.getElementById("typename");
var printed = document.getElementById("name");
var actions = []
function demo() {
  var old = actions.length ?
      actions[actions.length - 1].old : printed.innerHTML
  var str = nameinput.value.toLowerCase()
  if (old.length < str.length)
    actions.push({
      f: add.bind(null, str.slice(-1)),
      old: str
    })
  else if (old.length > str.length)
    actions.push({
      f: del,
      old: str
    })
 }
function play() {
  if (!actions.length)
    return
    
  var a = actions.shift()
  a.f()
}
function add(s) {
  printed.innerHTML += s
}
function del() {
  printed.innerHTML = printed.innerHTML.slice(0, printed.innerHTML.length - 1)
}
setInterval(play, 800)
nameinput.addEventListener("input", demo);

#name {
  height: 50px;
  width: 400px;
  margin: 20px auto;
  border: 1px solid lightgreen;
  border-radius: 4px;
  font-family: monospace;
  font-size: 200%;
  font-weight: 100;
  line-height: 50px;
}
#typename {
  font-size: 150%;
  line-height: 40px;
  height: 40px;
  width: 30%;
  min-width: 350px;
  border: 1px solid skyblue;
  display: block;
  margin: 20px auto;
  padding: 5px;
  border-radius: 4px;
}

<div id="name"></div>
<p>some text</p>
<input id="typename" type="text" />

这只是一个测试，似乎工作，但可能有一些缺陷的地方

这是我的看法。如果当前输出不是输入值的子字符串，则清除现有文本。

将所有内容包装在单个变量中，以避免与任何现有脚本的名称冲突，并添加了一些控件，以便更容易实现。

var iO = {
    interval: 800,
    inputSelector: '#input',
    outputSelector: '#output',
    
    updating: false,
    start: function () {
        iO.updating ||
        (   iO.updating = setInterval(iO.update, iO.interval),
                iO.update()
        )
    },
    stop: function () {
        clearInterval(iO.updating);
        iO.updating = false
    },
    update: function () {
        var i = document.querySelector(iO.inputSelector),
            o = document.querySelector(iO.outputSelector),
            $in = i.value,
            $out = o.innerHTML;
        if ($out == $in) {
            // update finished. stop.
            iO.stop();
            return
        }
        if (!$in.length) {
            // no input. clear output. stop.
            o.innerHTML = '';
            iO.stop();
            return
        }
        if ($out.length > $in.length || $in.indexOf($out) == -1) {
            // output > input or output not found in input. clear output.
            o.innerHTML = '';
        }
        if (typeof $in[$out.length] !== "undefined") {
            // next letter is defined. add it to output.
            o.innerHTML += $in[$out.length];
        }
        if (o.innerHTML == $in) {
            // update finished. stop.
            iO.stop();
        }
    }
};
document.getElementById("input").addEventListener("keyup", iO.start);

body {
  background-color: #f5f5f5;
  margin: 0;
  padding: 0;
}
#input, #output {
  font-size: 2.1rem;
  line-height: 2.1rem;
  min-height: 4rem;
  min-width: calc(100vw - 6rem);
  max-width: 80vw;
  margin: 2rem auto 1rem;
  display: block;
  line-height: 2rem;
  padding: .5rem 1rem;
  box-sizing: border-box;
}
#output {
  background-color: white;
  border-radius: 2px;
  box-shadow: 0 1px 5px 0 rgba(0,0,0,.1),0 2px 2px 0 rgba(0,0,0,.07),0 3px 1px -2px rgba(0,0,0,.06);
  min-height: 10rem;
  padding: 1rem;
}

<input id="input" type="text" />
<div id="output"></div>

在用户输入时创建一个闭包:

function demo(){
    setTimeout(
        function(inp){
            return function(){
                printed.innerHTML = inp;
            }
    }(nameinput.value.toLowerCase()), 800);
}

存储一个在设置超时时输入的要执行的闭包。