Как я могу получить данные от пользователя, пока он / она печатает в данный момент? - PullRequest
Новая
       63

Как я могу получить данные от пользователя, пока он / она печатает в данный момент?

0 голосов
/ 21 октября 2019

Я создаю программу, которая будет использовать стек в качестве структуры данных. Основная функция программы - «повторить» и «отменить». Пользователь будет что-то печатать в графическом интерфейсе, и там будут две кнопки, повторить и отменить. Я хотел сохранить каждое слово в определенном узле, поэтому всякий раз, когда пользователь будет нажимать отмену, будет применено предыдущее состояние текстового поля.

Итак, проблема в том, как я могу получить данные, когда пользователь перестанет печатать? Как я должен получить таймер тогда что? или я должен просто создать условие, в котором я буду хранить каждое слово на узле?

1 Ответ

0 голосов
/ 21 октября 2019

Вы можете создать простой дебат с помощью setTimeout, чтобы записывать состояние только после x миллисекунд без ввода. Состояние может быть просто сохранено в массиве. попсовые элементы для этого.

Вот простое доказательство концепции. Я не горжусь этим, но этого должно быть достаточно, чтобы получитьты начал. Обратите внимание, что я использовал jQuery для удобства, но сделать это довольно просто в vanilla JS. 

$(function() {

  var debounce = null, //ref for debouncer timeout     
      $textarea = $("#myTextarea"),
      $undo = $("#undo"),
      $undocount = $("#undo span"),
      history = [];

  $textarea.on("keyup", function() {
      clearTimeout(debounce); //clear the debounce
      debounce = setTimeout(function() {
        history.push($textarea.val());
        $undocount.text(history.length);
      }, 300);
  }).on("blur", function() {
      history.pop();
  });

  $undo.on("click", function() {
    $undocount.text(history.length);
    $textarea.val(history.pop());
  })

});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<textarea id="myTextarea"></textarea>
<button id="undo">UNDO [<span>0</span>]</button>
...