JQuery принимает живой ввод, а затем моделирует ввод

Question

JQuery принимает живой ввод, а затем моделирует ввод

0

У меня возникли проблемы с симуляцией живого ввода с помощью 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 миллисекунд, как и следовало ожидать. Что я делаю неправильно? Я предполагаю, что это имеет какое-то отношение к сфере видимости.

Редактировать:

Извините, я не был чист. Я хотел бы сохранить задержки в действии пользователя, т.е. Подождать несколько секунд, прежде чем вводить текст, вводить слова с разной скоростью и т.д. Возможно ли это?

Someone 11 нояб. 2013, в 00:00

Источник

Теги:

javascript

jquery

3 ответа

Ещё вопросы

SidOfc · Answer 1 · 2013-11-10T21-38-00.000Z

Я отредактировал код, который вы разместили в вашем JSBin, изменил несколько вещей здесь и там. Логика переписанного скрипта добавляется в виде комментариев.

Вот пример

Я хотел, чтобы фактическая печать происходила в реальном времени. Я знаю, что вы пытаетесь сделать, поскольку я видел подобные решения, но это не связано с задержками в действиях пользователя, то есть ожиданием нескольких секунд, прежде чем набрать следующее слово / символ.
Вы хотите, чтобы задержка была такой же, как у пользователя? как в каждом символе набирается именно на этапе пользователя? это можно сделать;) или просто увеличить время setTimeout, чтобы оно было случайным

JDev · Answer 2 · 2013-11-10T21-58-00.000Z

Попробуйте этот пример http://jsbin.com/eVOcOku/4/.

В вашем примере у вас есть дополнительная проблема с timeInterval.

Извини, я не понял. Смотрите мое редактирование.

Michael Beeson · Answer 3 · 2013-11-10T20-47-00.000Z

Есть несколько проблем, с которыми вы сталкиваетесь, некоторые из них связаны с ненужным кодом, а некоторые - с природой setTimeout

Прежде всего функция pushKeyStrokes() кажется изворотливой; он проверяет только каждые 100 мс? Кроме того, он не нужен, потому что позже вы можете просто пройти через строку, предоставленную вводом после нажатия кнопки, и вы можете сделать это с помощью charAt.

Во-вторых, вы ссылаетесь на значение "counter" в вашей функции 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);
    }

});

});

Извини, я не понял. Смотрите мое редактирование.