Question

我在使用jQuery模拟实时打字时遇到了一些问题。我的Javascript如下（使用现场演示here）。

$(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中发布的代码，在这里和那里修改了一些东西。重写脚本背后的逻辑以注释的形式添加。

Here's an example

Answer 2

试试这个例子http://jsbin.com/eVOcOku/4/。

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

Answer 3

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

首先，pushKeyStrokes（）函数似乎很狡猾;它只检查每100毫秒？此外，它不需要，因为稍后您可以在按下按钮后浏览输入提供的字符串，并且您可以使用charAt执行此操作。

其次，你指的是setTimeout函数中的值“counter”，但是在调用函数时，计数器值将达到输入字符串的长度;在第一次调用字符显示功能之前，每次都会调用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);
    }

});

}）;

jQuery采用实时输入然后模拟打字

3 个答案: