javascript - jQuery 中的自动保存文本区域字段

Question

这个问题已经有答案了:

JavaScript jQuery delay oninput (1 个回答)

已关闭 3 年前。

我想请求一些帮助，以使用 Ajax 从“记事本”保存数据。在我的例子中，记事本是一个简单的文本区域，我们可以为其捕获 onchange 事件。

HTML

<textarea id="notepad"></textarea>

jQuery

$('#notepad').on('change paste keyup', function(event) {

    var formData = $(this).serialize();

    $.ajax({
        url: url,
        type: 'POST',
        data: formData,
        success: function(data, status) {
            console.log('Something worked');
        },
        error: function(xhr, desc, err) {
            console.log('Something went wrong');
        }
    });
}

上面的代码非常适合我需要做的事情。然而，在实践中我发现上面的代码对于这个场景并不完美，因为很多内容都会经过这个 textarea 每个 keyup/change 都有一个 ajax 调用，这是大量的 Ajax 和 MySQL 调用。

我需要帮助来弄清楚如何仅在文本更改完成后才能触发 Ajax 调用。我的第一 react 是为 ajax 调用添加延迟，但这仍然意味着在设定的时间后会进行很多很多的 ajax 调用。

有没有办法让我完全保留 Ajax 调用直到最后？那可能是用户完成向文本区域添加内容后 5 秒？

注意:遗憾的是，添加提交按钮并不是一个选项。

Answer 1

尝试通过 jQuery 更改您正在监听的事件。 “更改粘贴键盘”都是不同的事件。尝试去掉“keyup”并保留另外两个。

这是最简单的答案。

另一个更复杂的选项是添加一个计时器，延迟 ajax 直到经过一定时间。

$('#notepad').on('change paste keyup', function(event) {
  var formData = $(this).serialize();
  setTimeout(function(){

    $.ajax({
      url: url,
      type: 'POST',
      data: formData,
      success: function(data, status) {
          console.log('Something worked');
      },
      error: function(xhr, desc, err) {
          console.log('Something went wrong');
      }
    });
  }, 3000);
}

两个注意事项:我将 formData 变量保留在超时之外，因为“this”在匿名函数中不会发挥相同的作用。 (另一种选择是将“this”保存到另一个变量，然后在超时内序列化表单数据。)

var thisForm = $(this)
setTimeout(function(){
  var formData = thisForm.serialize()

最后，“3000”是事件触发后触发超时的时间(以毫秒为单位)。

另外——使用 const 或 let 代替 var。 (参见https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/const和https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let)