如何在用户当前键入时从他/她那里捕获数据?

Question

我正在创建一个将使用堆栈作为数据结构的程序。该程序的主要功能是"重做"和"撤消"。用户将在GUI上键入任何内容，并且将有两个按钮，重做和撤消。我想将每个单词存储在特定节点上，以便每当用户按下撤消操作时，都会应用文本框的先前状态。

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

Answer 1

您可以使用 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>