jQuery采用实时输入，然后模拟输入

Question

我在用jQuery模拟实时打字时遇到了一些问题。我的Javascript如下(一个现场演示这里)。

$(document).ready(function () {
    var keystrokes = [];
    var value = "";
    var counter = 0;
    window.setInterval(pushKeystrokes, 100);
    function pushKeystrokes() {
        keystrokes.push({
            value: value
        });
    }
    $("#test").keyup(function () {
        value = $(this).val();
    });
    $("#button").click(function () {
        $("#test").val("");
        $.each(keystrokes, function () {
            window.setTimeout(function () {
                $("#test").val(keystrokes[counter].value);
            }, 100 * counter);
            counter++;
        });
    });
});

这应该是等待一个名为test的文本字段的输入，只要单击一个按钮，就应该清除该文本字段并模拟输入用户实时输入的字符。出于某种原因，我对setTimeout的调用只产生数组中的最后一个值。

但是，如果我将Math.random设置为setTimeout中文本字段的值，而不是keystrokes[counter].value，那么它似乎每100毫秒更新一次。我到底做错了什么？我猜这和范围有关。

编辑：

抱歉我没说清楚。我想保留用户操作的延迟，即在打字前等几秒钟，以不同的速度打字等等。这还可能吗？

Answer 1

我已经编辑了您在JSBin中发布的代码，这里修改了一些东西。重写脚本背后的逻辑是以注释的形式添加的。

下面是一个例子

Answer 2

试试下面的示例http://jsbin.com/eVOcOku/4/。

在您的示例中，timeInterval还有其他问题。

Answer 3

这里有一些问题，一些与不必要的代码有关，还有一些与setTimeout的性质有关

首先，pushKeyStrokes()函数看起来不可靠；它每100 ms只检查一次？此外，它也不需要，因为稍后您只需在按下按钮后，就可以遍历输入提供的字符串，并且可以使用charAt完成这一操作。

其次，您是指setTimeout函数中的“计数器”值，但在调用该函数时，该计数器值将达到输入字符串的长度；在第一次调用字符显示函数之前，每次调用counter++都已经被调用了！

无论如何，我修改了您的JS Bin；希望这是有意义的，如果您有任何问题，请告诉我：

$(document).ready(function() {

  var value = "";
  $test = $("#test");

  $("#button").click(function() {

    value = $test.val();
    $test.val("");

    for (var i = 0; i < value.length; i++)
    {
       window.setTimeout(addChar, 100 * i, value.charAt(i));
    }

    function addChar(char)
    {
      $test.val($test.val() + char);
    }

});

})；