在 jQuery 中自动保存文本区域字段

Question

我想请求一些帮助，以使用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每次键控/更改都有一个 ajax 调用是很多 Ajax 和 MySQL 调用。

我需要帮助弄清楚如何在文本更改完成后以某种方式触发 Ajax 调用。我的第一直觉是为 ajax 调用添加延迟，但这仍然意味着在设定的时间后会有很多 ajax 调用。

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

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

Answer 1

尝试通过 jQuery 更改您正在侦听的事件。"更改粘贴键控"都是不同的事件。尝试将"键控"取出并留下其他两个。

这是最简单的答案。

另一个更复杂的选择是添加一个计时器，将 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(