时间戳

首页 > 解决方案 > 如何在用户当前键入时从用户那里获取数据？

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

问题描述

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

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

标签： javascriptjavalinked-liststackundo-redo

解决方案

您可以使用 setTimeout 创建一个简单的去抖动，以便仅在 x 毫秒无输入后记录状态。状态可以只存储在一个数组中。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>

推荐阅读