如何在用户当前键入时从用户那里获取数据？

Question

我正在创建一个将堆栈用作数据结构的程序。 该程序的主要 function 是“重做”和“撤消”。 用户将在 GUI 上键入任何内容，并且将有两个按钮，重做和撤消。 我想将每个单词存储在特定节点上，因此每当用户按下撤消时，将应用文本框的先前 state。

所以问题是，当用户停止输入时，我如何捕获数据？ 就像我应该得到一个计时器然后呢？ 还是我应该创建一个条件，将每个单词存储在一个节点上？

Answer 1

您可以使用 setTimeout 创建一个简单的去抖动，以便仅在 x 毫秒无输入后记录 state。 state 可以存储在一个数组中。 pop() 项用于您的撤消。

这是一个简单的概念证明。 我并不为此感到自豪，但它应该足以让你开始。 请注意，为方便起见，我使用了 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>